0

很难弄清楚如何在任何 vue 插件上使用Aphrodite应用 css。我试图在vue-select插件上覆盖 css，但问题是我无法访问插件内生成的元素。我试图获得一个类选择器，但没有运气。任何帮助将非常感激。

样本：

<v-select
     v-model="filterDate"
     :options="filterOptions"
     :on-change="onFilterChange"
     :class="css(styles.inputBordered)"
>
</v-select>

脚本：

styles () {
    return StyleSheet.create({
        inputBordered: {
            border: '1px solid ' + this.theme.backgroundColor,
            borderRadius: '5px',
            '.dropdown-toggle': {
                 //some css overrides in here
            }
        }
    });
}
4

1 回答 1

0

我认为这对于嵌套在子组件中的元素是不可能的，除非插件有一个 props 接口允许你自己传入类名。

如上所示添加的类仅添加到组件的根元素中。

Aphrodite 要求将生成类直接添加到元素中，但您无法从 Vue 中访问该元素，因为它由子元素控制。

此外，即使可能，这也不是一种非常可靠的覆盖样式的方法，因为它：

  • 仅当子组件中的 CSS 也具有特异性 1 时才能工作
  • 即使两者的特异性都为 1，它也依赖于出现在孩子之后的阿芙罗狄蒂类定义，这可能取决于您的构建设置。

简而言之：我认为这不会以任何可靠的方式起作用。

于 2018-01-11T16:51:24.367 回答