在 vue 插件上使用阿佛洛狄忒注入样式

Question

很难弄清楚如何在任何 vue 插件上使用阿佛洛狄忒应用 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
            }
        }
    });
}

Answer 1

我认为这对于

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

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

Aphrodite 要求将 generate 类直接添加到元素中，但你不能从 Vue 中访问该元素，因为它是由子元素控制的。

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

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

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