React Semantic UI и пользовательский класс CSS

У меня есть проект, в котором я использую semantic-ui-react. Проект построен с помощью веб-пакета и имеет включенный sassLoader.

У меня есть следующий код в компоненте React:

<Label className="test">
   sample text
</Label>

У меня есть следующий код в файле scss, который загружается этим компонентом:

.test {
    color: red;
}

Образец текста не отображается красным. Я знаю два возможных решения: повысить специфичность или поставить important! после правила CSS. Я хотел бы знать, почему это происходит. Почему этого не происходит, когда я использую собственную версию Semantic UI?

Чтобы помочь, вот скриншот из инспектора в Chrome:

введите здесь описание изображения


semantic-ui-react
person mustang    schedule 06.11.2017    source источник
comment
вы можете использовать стилизованные компоненты, посмотрите здесь   -  person xargr    schedule 31.10.2018

Ответы (2)


arrow_upward
3
arrow_downward

Я полагаю, что вы практически ответили на свой вопрос в semantic.css, что Semantic UI использует комбинацию классов файлов .ui.label, имеет предопределенный цвет rgb(0,0 ,0,.6) — это классы, которые использует элемент React Label.

Поскольку .ui.label более специфичен, чем .test (2 класса против 1 класса), вот замечательная инфографика по этому поводу: http://www.standardista.com/css3/css-specificity/), параметр цвета первого класса превосходит второй цветовой параметр.

Я пробовал это с семантическим интерфейсом и без React, и результат был тот же.

.test {
   color: red;
}

<div class="ui label test">not a color red</div>
person stijena    schedule 07.11.2017
comment
Мне потребовалась секунда, но теперь я понял. Когда я использую оболочку реакции, классы пользовательского интерфейса и метки не переносятся, поэтому из-за правил специфичности побеждает значение по умолчанию. Если я не использую оболочку реакции, я добавляю свой класс к пользовательскому интерфейсу и тестовым классам, и это то, что отображается. - person mustang; 08.11.2017

arrow_upward
0
arrow_downward

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

person Armando Lambertucci    schedule 12.11.2020