как переопределить css в компоненте Vue
У меня есть выпадающий список в компоненте vue, и класс этого элемента - "form-control", и у него есть свои собственные стили. Мне нужно переопределить стили этого класса. для этого я сделал кодирование следующим образом (в компоненте vue),
<style scoped>
.form-control{
border-radius: 50px !important;
color: #823F98 !important;
border: 1px solid #3FA294 !important;
}
</style>
но этот вариант мне не подошел, так как же его обойти?
Спасибо!
Ответы - как переопределить css в компоненте Vue / how to override css in Vue component
27.11.2020 09:51:32
Вы должны удалить области. Если вы оставите область видимости, она не будет применяться к другим компонентам, включая те, которые вы импортируете.
Или двигаться, что CSS в приложение.CSS или приложение.СКС.
27.11.2020 12:23:21
Использование стиля unscoped может быть очень опасным, особенно общие имена классов, такие как form-control.
Я думаю, что это лучший способ использовать глубокие стили в вашем Родительском компоненте:
<style scoped>
>>>.form-control{
border-radius: 50px !important;
color: #823F98 !important;
border: 1px solid #3FA294 !important;
}
</style>
но если вы можете рефакторировать свой дочерний компонент и добавить реквизит типа formControlStyle с вашими стилями CSS, это будет лучшим решением, чтобы избежать побочных эффектов. Вы можете добавить значение по умолчанию для этой опоры, которое является вашим стилем в дочернем компоненте.