Внедрение стилей с использованием Aphrodite в vue plugins

Question

Трудно было понять, как применить css с помощью Aphrodite для любых vue-плагинов. Я попытался переопределить CSS на плагине vue-select, но проблема в том, что я не могу получить доступ к сгенерированным элементам внутри плагина. Я пытался получить селектор класса, но не повезло. Любая помощь приветствуется.

Образец:

<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, позволяющий вам передавать имена классов самостоятельно.

добавленные классы, как показано выше, добавляются только к корневому элементу компонента.

Афродита требует, чтобы генерирующий класс был непосредственно добавлен к элементу, но вы не можете получить доступ к этому элементу из Vue, поскольку он контролируется дочерним элементом.

Более того, даже если это возможно, это не очень надежный способ перезаписи стилей, потому что:

• может работать только если CSS в дочернем компоненте также имеет специфичность 1
• даже если оба имеют специфичность 1, он опирается на определения классов афродиты, появляющиеся после определения дочернего, что может зависеть от настроек вашей сборки.

Короче говоря: я не думаю, что это будет работать надежным способом.