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>