スコープ付きコンポーネントに親コンポーネントからスタイルを適用する方法

vueのscopedの扱いで躓くことがあったので備忘録として。

スコープ付きコンポーネントとは?

下記のコードのようにstyle要素にscoped属性を持ったCSSはそのコンポーネントにのみ適用されます。

<template>
  <p class="hoge">fuga</p>
</template>

<style scoped>
.hoge {
 color: red;
}
</style>

コンパイルするとわかるように、要素とセレクタにdata-v-589fsdfのようなユニークな属性が付与されることによって他の要素にCSSが漏れ出さないようにしています。

親コンポーネントからスタイルを上書きする方法

scopedはとても便利な機能ではありますが、親コンポーネントからスタイルを上書きするには特殊なセレクタを使用する必要があります。

/* css記法の場合 */
<style scoped>
.parent >>> .child { … }
</style>

/* scss記法の場合 */
<style scoped>
.parent /deep/ .child { … }
</style>

css記法の場合は>>>、scss・sass記法の場合は/deep/というコンビネータを使うことによってscopedを持った子コンポーネントのスタイルを上書きすることができるようになります。