css - 在 vue 插件上使用 Aphrodite 注入(inject)样式

Question

很难弄清楚如何使用 Aphrodite 应用 css|在任何 vue 插件上。我试图覆盖 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 接口(interface)允许你自己传递类名。

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

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

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

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

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