Inject styles using Aphrodite on vue plugins

Question

Had a hard time figuring out how to apply css using Aphrodite on any vue plugins. I tried to override css on a vue-select plugin but the issue is I can't access the generated elements inside the plugin. I tried to get a class selector but no luck. Any help would be much appreciated.

Sample:

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

Script:

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

Answer 1

I don't think that this is possible for elements nested in the child component, unless the plugin has a props interface allowing you to pass in classnames yourself.

classes added like you show above are added to the root element of the component only.

Aphrodite requires that the generates class is directly added to the element, but you can't access that element from within Vue as it's controlled by the child.

Furthermore, even if possible, this is not a very reliable way of overwriting styles because it:

• can only work if the CSS in the child component also has a specificity of 1
• even if both have specificity of 1, it relies on the aphrodite class definitions appearing after the ones of the child, which can depend on your build setup.

So in short: I don't think that will work in any reliable way.