Question

很难弄清楚如何在任何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
            }
        }
    });
}

Answer 1

我不认为嵌套在子组件中的元素是可行的，除非插件有一个允许你自己传递类名的道具界面。

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

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

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

只有在子组件中的CSS也具有1
即使两者都具有1的特异性，它依赖于孩子之后出现的aphrodite类定义，这取决于你的构建设置。

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

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

1 个答案: