Как перезаписать стиль компонента из его родителя во vue.js?

Question

[Александр]

Не очень понимаю как надо перезаписывать стили компонента в его родителе. Если я присваиваю некоторый класс компоненту при его объявление в родителе, то стили записанные в родителе на этот класс перезаписываются стилями самого компонента, так как vue-loader собирает css таким образом, что стили компонента идут после стилей родителя. Таким образом не получается перезаписать стили компонента из его родителя не прибегая к ухищрениям с css (например использование !important). Честно говоря не понимаю что с этим можно сделать. Подскажите пожалуйста.

Answer 1

[0xD34F]

Добавьте специфичности селектору, объявленному в родителе.

Comments

[Александр]

Это смахивает на костыль(

[0xD34F]

LordGuard, может и костыль (как по мне, так нет). Но это в любом случае лучше, чем использовать important.

Встроенные стили ещё можно использовать (:style="..."). Вот это точно уже костыль, но и он лучше чем important.

Answer 2

[fl3nkey]

Не совсем понятно что вы хотите сделать, но для описания стилей конкретного компонента есть атрибут scoped. Документация

Comments

[Александр]

При чём тут scoped? Окей, приведу пример:

Есть компонент SuperButton:

Его темплейт:

<button class="super-button">
<slot/>
</button>

Его стили:

.super-button { 
position: relative 
}

Дальше объявляем этот компонент в неком родительском компоненте SuperParent таким образом:

<SuperButton class="incredible-super-button">Супер кнопка</SuperButton>

Дальше я пытаюсь переопределить стили компонента SuperButton в компоненте SuperParent. Я прописываю в компоненте SuperParent такие стили:

.incredible-super-button { 
position: absolute
}

В итоге открывая браузер я вижу, что кнопка имеет позиционирование relative, а не absolute, то есть стили самой кнопки перезаписали стили прописанные для неё в род. компоненте, а не наоборот.

[fl3nkey]

LordGuard, в таком случае, используйте метод, который описали вам ниже, и как по моему костылём это не является.

.super-parent .incredible-super-button {
  position: absolute;
}

Answer 3

[MaxVilson]

Для меня это тоже актуально, полагаю что это можно настроить в Webpack. Александр получилось в итоге разобраться?