将 css 注入 Vue 组件？

Question

见下文my-component.vue 。这个组件需要是可主题化的。

它需要获取外部 css 表，因为我需要允许其他开发人员自定义其内部外观。

除了接受 javascript 对象之外，还有其他方法吗？

<template>
  <div class="container">
    <div class="A"></div>
    <div class="B"></div>
    <div class="C"></div>
  </div>
</template>

<style scoped>
  .A {
    background-color:green;
  }
  .B {
    background-color: red;
  }
  .C {
    background-color: yellow
  }
</style>

Answer 1

在您的组件内部：

 <template> <div :class="boxStyle"></div> </template> <script> export default { props: { boxStyle: { type: String, default: 'box-default' } } } </script> <style lang="scss" scoped> .box-default { width: 100px; height: 100px; background: black; } </style>

用户可以这样使用它：

 <template> <div id="app"> <my :boxStyle="'mySpecialBox'"></my> </div> </template> <script> import myCompoentns from './components/myComponent.vue' export default { name: 'app', components: { 'my': myCompoentns }, } </script> <style lang="scss"> .mySpecialBox { width: 250px; height: 250px; background: red; } </style>

这样，用户可以定义任何他想要的样式，任何他想要的类名。 他只需要使用适当的属性名称。 范围样式没有副作用。

Answer 2

您可以使用“深度”选择器来覆盖“范围”组件样式中的任何样式。

<style scoped>
.a >>> .b { /* ... */ }
</style>

详细信息： vue-loader/deep-selector