как переопределить css в компоненте Vue


как переопределить css в компоненте Vue

27.11.2020 09:01:33 Просмотров 4 Источник

У меня есть выпадающий список в компоненте 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

Mirco Cattabriga

27.11.2020 09:51:32

Вы должны удалить области. Если вы оставите область видимости, она не будет применяться к другим компонентам, включая те, которые вы импортируете.

Или двигаться, что CSS в приложение.CSS или приложение.СКС.

Является ответом!
Imre Ujlaki

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, это будет лучшим решением, чтобы избежать побочных эффектов. Вы можете добавить значение по умолчанию для этой опоры, которое является вашим стилем в дочернем компоненте.

Помочь в развитии проекта:
Закрыть X