Удалить box-shadow из компонента Vuetify

У меня есть

расширенная таблица строк от Vuetify, в строке появилась тень блока, а расширенный

Удалить box-shadow из компонента Vuetify

Я хочу

чтобы удалить box-shadow, я проверил вкладку в стиле консоли, я вижу

Удалить box-shadow из компонента Vuetify

поэтому я решил добавить этот код внизу моего show.vue

.v-data-table > .v-data-table__wrapper tbody tr.v-data-table__expanded__content {
    box-shadow: none !important;
}

Я не вижу никакого эффекта, тень все еще есть.

Возможно, вам нужен глубокий селектор? Если вы не видите свой CSS-свойство box-shadow: none, значит, чего-то не хватает с точки зрения охвата/досягаемости данного компонента.

kissu 05.04.2022 18:48

Вы правы, теперь это работает.

code-8 05.04.2022 19:38
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
2
35
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Можете ли вы попытаться поместить его в тег стиля, который не имеет области действия (т.е. без области действия).

Нравиться

<style>
 .v-data-table > .v-data-table__wrapper tbody tr.v-data-table__expanded__content {
   box-shadow: none !important;
 }
</style>
Ответ принят как подходящий

Как объяснялось в этот ответ, вы можете использовать глубокие селекторы.

В вашем случае это, кажется, работает

>>> .v-data-table > .v-data-table__wrapper tbody tr.v-data-table__expanded__content {
  box-shadow: none !important;
}

Другие вопросы по теме