Bootstrap переопределяет стиль таблицы в пользовательской таблице стилей ⇐ CSS

[Anonymous]

В настоящее время я перешел с начальной загрузки версии 4 на версию 5 и пытаюсь пройти и исправить любые изменения, которые могли быть нарушены. Я столкнулся с этим, но не могу понять.
Таблица неправильно отображает тег . Теги моей таблицы thead th в моем пользовательском листе CSS переопределяются таблицей > :not(caption) > * > * на листе table.scss в начальной загрузке.
HTML:



TITLE HERE

CSS:
/* Bootstrap */
.table > :not(caption) > * > * {
padding: 0.5rem 0.5rem;
color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
background-color: var(--bs-table-bg);
border-bottom-width: var(--bs-border-width);
box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}

/* custom css sheet */
table thead th {
border-right: 1px solid #939393;
background: #666;
background-color: rgb(102, 102, 102);
background-position-x: 0%;
background-position-y: 0%;
background-repeat: repeat;
background-image: none;
color: #fff;
padding: 12px 33px 12px 12px;
text-align: left;
vertical-align: top;
font-weight: bold;
}


Подробнее здесь: https://stackoverflow.com/questions/786 ... tyle-sheet