Vue.js において Conditional に rendering したい場合、どうしても functional component を使わないといけない場合がある。
その場合、JSX と組みわせて使用することが推奨されているが、JSX の中で className を使った場合に、うまく class にならない。

この問題は、私の環境特有のものかもしれないし、設定次第でなおるのかもしれない。正しい運用方法ご存知の方は、ぜひコメントで教えていただけると助かります。

現状の問題

以下のように書くと、class="myClass" にはならない。単に className="myClass" になってしまう。
これだと CSS を当てれない。

const FunctionalJSXComponent = ({ data, props }) => {
  return <h2 className="myClass">functionalJSXComponent</h2>
}

さしあたっての解決法

以下のようにするしかない。ただし WebStorm からはワーニングのアラートがでる。JSX のシンタックスにあっていないため。

const FunctionalJSXComponent2 = ({ data, props }) => {
  return <h2 class="my-class">functionalJSXComponent</h2>
}

自分は親コンポーネントで以下のように設定して、BEM like な書き方で運用することにした。

<style scoped lang="scss">
.test {
  background: red;
}
.my-class {
  background: blue;
}
</style>