在vue插件上使用Aphrodite注入样式

Question

我很难弄清楚如何使用Aphrodite在任何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要求将生成的类直接添加到元素中，但您不能从Vue中访问该元素，因为它由子元素控制。

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

仅当子组件中的CSS的特异性为1

• 时，aphrodite

• 才能工作，即使两者的特异性都为1，它也依赖于出现在子组件的类定义之后的aphrodite类定义，这取决于您的构建设置。

因此，简而言之:我认为这不会以任何可靠的方式工作。