Переопределить атрибут стиля в компоненте NextUI NavBar ⇐ CSS

[Anonymous]

Проблема
Я не могу изменить атрибут style="--navbar-height: 4rem;" в моем компоненте NextUI Navbar в моем приложении Remix, что нарушает мою настраивать. Хотя я впервые сталкиваюсь с этим, я уверен, что многие компоненты имеют эти атрибуты, поэтому мне нужно знать, как нацелить и переопределить их как для этой, так и для будущих проблем.
Подробнее< /h1>
У меня есть чрезвычайно простое приложение Remix/NextUI, которое я только что установил в соответствии с официальной документацией. Я пытаюсь добавить к нему компонент бренда/логотипа, но, поскольку это SVG большего размера, он оказывается выше верхней части экрана. Мне не удалось изменить это, независимо от того, какие переопределения свойств высоты/ширины/обоснования/viewbox/clear/etc/className я установил как для , так и для компоненты. Через некоторое время я обнаружил, что тег , сгенерированный NextUI, имеет атрибут стиля с двойным тире перед ним, и я, похоже, не могу нацелиться ни на что, что пытаюсь. Именно этот элемент я вижу, когда проверяю HTML:

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

Ближе всего я подошел к изменению этого, используя встроенный стиль в моем компоненте, который решил проблему, когда логотип выталкивался за верхнюю часть экрана, но при наведении я могу видите, что дочерние элементы наследуют высоту 4rem, и поэтому чувствуете, что это нарушит работу других компонентов при их добавлении.
Я опустил большую часть кода, но, как уже упоминалось, это голые кости настройки Remix/NextUI, так что предположим, что все в порядке согласно руководствам по установке, найденным на соответствующих веб-сайтах этих библиотек, но это мой компонент Navbar и SVG

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

Если я удалю стиль высоты, он сломается. Я не могу добавить стиль для двойного тире, я пробовал несколько разных способов, основанных на поиске в Google:

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

// Component file
style={{ navbar-height: 200 }}>
style={{ navbarHeight: 200 }}>
style={{ $$navbar-height: 200 }}>
style={{ $$navbarHeight: 200 }}>

// tailwind.css file
:root {
--navbar-height: 200px !important;
}
:root {
--navbar-height: 200px;
}

Кроме того, даже если я смогу переопределить его с помощью специального CSS в CSS-файле попутного ветра, я чувствую, что это не очень хорошее решение, поскольку мне нужны разные размеры в зависимости от ширина устройства, например, мобильный телефон или компьютер, поэтому, хотя мне хотелось бы знать, как нацелить его, исходя из этого, это будет только отправной точкой, и в конечном итоге хотелось бы знать, как исправить это динамически из компонента или самой опоры.Я вижу в исходном коде, что это устанавливается некоторой динамической переменной высоты, но я незнаком и не смог эффективно отследить это

Подробнее здесь: https://stackoverflow.com/questions/792 ... -component