8.父组件修改子组件样式

现在 button 间没有距离

我们给确认按钮增加外边距 margin

在 App.vue 文件增加

<style>
  .primary-button {
    margin: 0 12px;
  }
</style>

发现样式没有应用上。这是因为子组件的也有 margin 属性，而且也是通过 class 指定的。父组件修改 margin 属性用 class 选择器权重不足。我们可以在 margin 属性后添加 !important 提升权重，也可以直接使用内联样式。

<style>
  .primary-button {
    margin: 0 12px!important;
  }
</style>

<my-button type="primary" style="margin: 0 12px">确认</my-button>

 但是 !important 可能将子组件一些重要的样式给覆盖，而内联样式对于有多个 my-button 元素书写起来就比较麻烦。

我们可以使用深度作用选择器 /deep/

<style>
  #app /deep/ .primary-button {
    margin: 0 12px;
  }
</style>