【Vue.js】子コンポーネントのcssを上書きする方法

概要

• deep selector を使用する。

方法

vue2の場合

• ::v-deep の他に、 >>> または /deep/ を指定する方法があるが、バージョンによってはエラーになったり、解釈されなかったりする。

.parent-some-class ::v-deep .child-some-class {
  margin-top: 30px;   
}

vue3の場合

• vue3では、 >>> または /deep/ が廃止された。

::v-deep(.child-some-class) {
  margin-top: 30px;   
}
// ショートハンドの場合
:deep(.child-some-class) {
  margin-top: 30px;   
}

参考

github.com github.com