Vue3のSFC/tsxでcss modules を使うメモ

4183 ワード
Vue.js TypeScript css-modules TypeScript テキストリンク

VueをTypeScriptで扱うにあたって、SFC/comosition apiでのtemplateの型に困りすぎてjsx記法を検討している。

tsxとして記述できるのは知っていたが、Vueが魔術的に解決している scoped な css はどうやるのかな? というのを確かめる必要があった。

結論から言うと、 SFCの<style> をscopedでなく module として記述し、
setup や render 関数の中で useCssModule()を呼ぶことで <style> 内の宣言にアクセスできる。

以下の感じ。

SampleComponent.vue

<script lang="tsx">
import {defineComponent, PropType, useCssModule} from 'vue';

interface Props {
  hoge : string
}

export const SampleComponent = defineComponent({

  props : {
    hoge : {
      type : String as PropType<Props[`hoge`]>,
      required: true
    }
  },
  setup(props : Props){

    const styles = useCssModule();
    return ()=>{
      return (
          <div class={styles.sample} >
            <h1> Sample { props.hoge } </h1>
          </div>
      );
    };
  }
})

</script>

<style module lang="scss">

.sample {
  color: red;
}

</style>

vueの ref と併せ、これで全体の操作感がちょっと前の 「React + tsx + mobx + css modules」 構成に近い書き味となった。

ならはじめからReactでいいのでは?というとそうかもしれない。