💭

Vue.jsで親コンポーネントから子コンポーネントにCSSを反映させたい

2022/05/11に公開約700字

やりたいこと

<v-data-table>へ任意のCSSを反映させたい

やってみたけどだめだったこと

1. 普通に書く

scopedがついてるから子コンポーネントには反映されない

sample.vue
<style lang="scss" scoped>
  th, td {
    padding: 20px;
  }
</style>

2. ディープセレクタをつけて書く

下記では>>>または/deep/を付与して書くと子コンポーネントへCSSの付与ができるとのこと。

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
sample.vue
<style lang="scss" scoped>
  >>> th, >>> td {
    padding: 20px;
  }
</style>
sample.vue
<style lang="scss" scoped>
  /deep/ th, /deep/ td {
    padding: 20px;
  }
</style>

どっちで書いても反映されない。。
/deep/に至ってはエラーで怒られる。

解決

::v-deepと書くことで反映された。

sample.vue
<style lang="scss" scoped>
  ::v-deep th, ::v-deep td {
    padding: 20px;
  }
</style>

Discussion

ログインするとコメントできます