43
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Vue.js #1Advent Calendar 2017

Day 18

スコープ付きCSSで別のコンポーネントにスタイルを当てる

Last updated at Posted at 2017-12-20

書かれなかったみたいなので、代わりに先日投稿したものを紹介します。

Vue.jsを使っているときに、scoped内で別のコンポーネントにスタイルを当てるときにはまったので備忘録として残しておきます。

概要

scopedを使っている際に親のコンポーネントで子のコンポーネントのスタイルを変更しようとしても、別のスコープとなるため変更できません。
グローバルに書いていくという手もありますが、するとSFCの利点が得られませんし、すぐに管理できなくなります :innocent:
外部で定義された汎用コンポーネントとかを使う場合によく遭遇します。

簡単な例で確認していきます。

pugsassを使っています

子コンポーネント

デフォルトで赤色のテキストを表示するだけのコンポーネントです。

Child.vue
<template lang="pug">
.child-container
  .child-layout
    p.title ChildComponet
</template>

<script>
export default {
  name: "child",
}
</script>

<style lang="sass" scoped>
.title
  color: red
</style>

親コンポーネント

子コンポーネントを持ち、子のテキストを緑色にしようしています。

Parent.vue
<template lang="pug">
.parent-container
  p.title ParentComponent
  child.child
</template>

<script>
import Child from "./Child"

export default {
  components: { Child }
}
</script>

<style lang="sass" scoped>
.title
  color: blue

.child .title
  color: green
</style>

実行結果

上記のコードを実行すると子のテキストは赤色のままです :sob:

image.png

出力されるHTMLにはコンポーネントのスコープを表すdata-v-XXXというアトリビュートが設定されています。
(今回だと親はdata-v-a1-c2f88c、子はdta-v-10e5fd3c)

image.png

対してスタイルでは期待通りのスコープにはなっていません。

image.png

解決策

よく読んだら公式のスコープ付き CSSのページに書いてありました。

scoped スタイルで入れ子のセレクタが必要なら、CSS に対して >>> オペレータを、そして scss に対しては /deep/ を使用する必要があります

「入れ子」という表現が今回の例にマッチすることだと気づかず、何回もスルーしてましたorz

親コンポーネントに/deep/を反映してみます。

親コンポーネント

子のコンポーネント以下になるところで/deep/を追加します。

Parent.vue
<template lang="pug">
.parent-container
  p.title ParentComponent
  child.child
</template>

<script>
import Child from "./Child"

export default {
  components: { Child }
}
</script>

<style lang="sass" scoped>
.title
  color: blue

.child /deep/ .title
  color: green
</style>

実行結果

期待通りに緑色となりました :sunglasses:

image.png

スタイルはこんな感じで、.childにスコープの値が設定されています。

image.png

※HTMLに変化はないです。

注意点

/deep/をつけた後の結果を見ると分かりますが、/deep/以下はコンポーネント内部でグローバルになるので複数のコンポーネントを持つ場合は注意してください。

43
26
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
43
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?