Как я могу переопределить стили в табуляторе?
Я использую Vue Tabulator здесь, чтобы переопределить заголовок столбца, чтобы не использовать многоточие, когда я продолжаю уменьшать размер столбца. Можем ли мы обновить заголовок столбца в табуляторе, используя встроенный стиль?
<VueTabulator ref = "tabulator" v-model = "receipts" :options = "options" style = "white-space: normal; text-overflow: clip"/>
Но когда я проверил элемент, значения пробела и переполнения текста не изменились.
Я также пробовал внутри тега стиля в моем компоненте vue. Не повезло
<style>
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title{
white-space: normal;
text-overflow: clip;
}
</style>Потрясающий братан. Добавление !important помогло. Не поделитесь, как это работало?
Ответы 1
Добавление !important решило проблему.
Это происходит из-за специфики CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Это тоже легче понять: https://specifishity.com/
Дело в том, что у вас есть некоторые классы из пакета, который вы используете.
И, вероятно, там более высокая специфичность, поэтому ваш CSS по умолчанию не работает.!important довольно излишен и обычно не рекомендуется, потому что он побеждает всю цель каскада CSS, уничтожая его.
Между тем, для сторонних пакетов у вас нет полного контроля: это совершенно нормально и вполне нормально принудительно перезаписывать. Обычная практика для Bootstrap, Vuetify и т. д. и небольших пакетов.
3 возможных случая: вам нужен
important, или ваш селектор CSS не очень хороший (может быть, классы должны быть свернуты, а не разделены пробелом?), или вам нужноdeep, чтобы выбрать его правильно.