Как изменить цвет шрифта в семантическом UI React Accordion

В настоящее время я пытаюсь использовать аккордеонный компонент Semantic UI React и не могу понять, как изменить цвет и стрелку на белый.

https://semantic-ui.com/modules/accordion.html

В CSS вы можете видеть, что виджет имеет стиль, который делает его черным.

  1. Есть ли у компонента способ изменить цвет текста?
  2. Можно ли поместить родительский div для переопределения цветного текста? (пробовал, но не сработало)
  3. Как бы вы переопределили цвет? Любой обходной путь. (Это можно сделать с помощью переопределения, как указано ниже в комментариях с тегом! Important)

Компонент реакции аккордеона принимает панели

const panels = [
    {
        title: "test1",
        content: "test1"
    },
    {
        title: "test2",
        content: "test2"
    },
    {
        title: "super",
        content: "test"
    }
]

<Accordion className="test" panels={panels}/>

.test{
   color:white;
}

Аккордеон принимает className, но передача стиля тоже не работает. Я пробовал на каждом уровне также Accordion.Title Tag.

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

пример


semantic-ui-react
person darewreck    schedule 24.08.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы должны персонализировать класс композитора, который хотите изменить, и вам нужно «переопределить» классы css семантического пользовательского интерфейса, используя! Important.

.ui.accordion.perso
.title:not(.ui) {
     color : #ffffff !important;
}

Если вам нужна дополнительная информация о! Important (https://css-tricks.com/when-using-important-is-the-right-choice/)

Мир

person SD3L    schedule 24.08.2017
comment
Спасибо, есть ли способ обойтись без! Important. это кажется немного взломанным. Интересно, был ли компонент разработан таким образом, чтобы это позволяло - person darewreck; 24.08.2017
comment
! important не является хакерским. Просто хочу сказать, что элемент имеет приоритет над другим элементом. Вы должны быть осторожны и создать уникальный идентификатор или имя класса, чтобы использовать его, например, вы меняете только один элемент :) - person SD3L; 24.08.2017

arrow_upward
0
arrow_downward

Догадаться.

<Accordion>
    <Accordion.Title className="test2">
       <Icon name='dropdown' />
       <label className="label-color"> super</label>
    </Accordion.Title>
    <Accordion.Content>

    </Accordion.Content>
</Accordion>

Я понял, что могу просто использовать отдельные компоненты аккордеона, добавлять свои собственные элементы и стилизовать его.

person darewreck    schedule 24.08.2017