reactjs - 文字列比較は、React-JSS でバリアントの動的スタイリングを行う正しい方法ですか?

Question

ここにサンドボックスがあります：

https://codesandbox.io/s/p2wy9pp8lx

次のような動的なスタイリングがあります。

const styles = {
  fooDisplay: props => ({
    display: props.variant === "foo" ? "block" : "none"
  }),
}

次のようなクラスの場合:

const Something = ({ classes, children, variant }) => {
  return (
    <div className={classes.someThing}>
      <div> variant is : {variant}</div>
      <div className={classes.fooDisplay}>I only display if variant is foo</div>
    </div>
  );
};

これは私が望むことをします。

ただし、文字列比較を使用してこれを達成する正しい方法はありますか? それとも、これはパフォーマンスに悪いのでしょうか?