Как предотвратить перезапись стиля в v-текстовом поле Vuetify 3 при встраивании? ⇐ CSS

[Anonymous]

Я использую компонент v-text-field в Vuetify 3, и он работает нормально, пока я не встрою своего чат-бота на веб-сайт. При внедрении стили веб-сайта перезаписывают стили моего компонента, влияя на высоту, фон и закругленные углы поля ввода. Кроме того, при фокусировке появляется постоянное черное подчеркивание.
Вот соответствующий код:

Код: Выделить всё

mdi-send

Стили CSS:

Код: Выделить всё

.message-input-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px 8px 12px;
}

.message-input {
height: 56px;
padding: 0;
margin-right: 6px;
}

.send-button {
margin-left: 0px;
margin-right: 5px;
height: 56px;
border-radius: 4px;
width: 52px;
padding: 0;
}

Вот как это должно выглядеть (правильный вид):


Вот как это выглядит при вставке на веб-сайт (просмотр ошибок):
[img]https:// i.sstatic.net/fzMzu0O6.png[/img]

Как я могу гарантировать, что мой компонент сохранит свои стили, не подвергаясь влиянию CSS родительского веб-сайта?"
Обновление:
После изменения ввода сообщения с серым фоном и закругленными углами возникла новая проблема.

Всякий раз, когда текстовое поле находится в фокусе, появляется белая рамка с острыми углами и тенями, и я пытаюсь скрыть ее, используя следующее Директивы CSS в родительском контейнере не были выполнены:

Код: Выделить всё

.message-input-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px 8px 12px;
box-shadow: none !important; /* Removes box shadows */
-webkit-box-shadow: none !important; /* Removes box shadows for WebKit browsers */
-moz-box-shadow: none !important; /* Removes box shadows for Mozilla browsers */
outline: none !important; /* Removes focus outlines that might look like shadows */
border: none !important; /* Removes borders that might give a shadow effect */
}

.message-input {
height: 56px;
max-height: 56px;
background-color: #f7f7f7;
border-radius: 4px;
padding: 0 0 0 0; /* Adjust bottom padding as needed */
margin: 0 6px 0 0; /* Adjust bottom padding as needed */
}

Это не решило проблему. Как я могу гарантировать, что мой компонент сохранит заданные стили и устранить этот нежелательный эффект фокуса при внедрении в среду другого веб-сайта?"
Обновление 2 по проблеме:
После дальнейшего расследования я обнаружил, что эта белая рамка с тенями, появляющимися вокруг текстового поля при фокусировке, вызвана следующим правилом CSS в base.css родительского веб-сайта:

Код: Выделить всё

*:focus-visible {
outline: .2rem solid rgba(var(--color-foreground), .5);
outline-offset: .3rem;
box-shadow: 0 0 0 .3rem rgb(var(--color-background)), 0 0 .5rem .4rem rgba(var(--color-foreground), .3);
}

Я попробовал переопределить эти стили, используя следующий CSS, но это не дало никакого эффекта:

Код: Выделить всё

input:focus {
outline: none !important;
box-shadow: none !important; /* Removes box shadows */
-webkit-box-shadow: none !important; /* For WebKit browsers */
-moz-box-shadow: none !important; /* For Mozilla browsers */
}

.message-input:focus {
outline: none !important;
box-shadow: none !important; /* Removes box shadows */
-webkit-box-shadow: none !important; /* For WebKit browsers */
-moz-box-shadow: none ! important; /* For Mozilla browsers */
}

Несмотря на эти попытки, нежелательный эффект фокусировки сохраняется. Как я могу эффективно переопределить эти стили фокуса из CSS родительского веб-сайта?

Подробнее здесь: https://stackoverflow.com/questions/784 ... n-embedded