Стилизация статических и динамических текстовых полей в Phoenix LiveView ⇐ CSS

[Anonymous]

У меня есть файл html.heex, который имеет как статический тег, так и динамическую текстовую область, обозначенную следующим образом . Я сталкиваюсь с проблемами, когда пытаюсь стилизовать их обоих независимо. У меня такое ощущение, что проблема связана с тем, как я получаю доступ к динамической текстовой области в моем CSS с помощью textarea формы. Текущая проблема заключается в том, что стиль с помощью textarea формы переопределяет то, что находится в .line- цифры, и я не могу хоть убей настроить ширину динамической текстовой области. Я размещу изображения ниже, чтобы лучше понять структуру.
Но вот код, который у меня сейчас есть:
html.heex:

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

css-файл:

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

form textarea {
@apply bg-emDark-dark font-brand font-regular text-xs border border-white h-[300px] resize-none;
border-top-left-radius: 0 !important; /*!important seems to be a cheat code when css is misbehaving. doesn't work otherwise*/
border-top-right-radius: 0 !important;
color: white !important;
margin-top: 0 !important;
width: 300px !important; /*This affects both textareas but I want it to only affect the dynamic textarea*/
}

form textarea {
@apply focus:outline-none focus:border-white
}

.line-numbers {
@apply border border-white font-brand font-regular text-xs text-emDark-light bg-emDark-dark h-[300px] w-[54px] text-right overflow-hidden resize-none;
border-right: none;
border-top: none;
}

.line-numbers:focus {
@apply focus:outline-none focus:border-white focus:ring-0;
}

Как видите, у меня повсюду в коде есть куча !important, что не идеально, но по какой-то причине иначе ничего не работает. Мне просто нужно знать, как правильно работать с динамическими текстовыми областями и как их стилизовать, чтобы предотвратить этот хакерский способ ведения дел.
Первое изображение — это то, что у меня есть сейчас, а второе изображение это то, над чем я работаю.




Подробнее здесь: https://stackoverflow.com/questions/790 ... x-liveview