如何在语义 UI React Accordion 中更改字体颜色答案

【问题标题】：How to change font color in semantic UI React Accordion如何在语义 UI React Accordion 中更改字体颜色
【发布时间】：2018-02-01 21:07:32
【问题描述】：

我目前正在尝试使用 Semantic UI React 的手风琴组件，但不知道如何将颜色和箭头更改为白色。

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

在 css 中，您可以看到小部件具有将其配置为黑色的样式。

组件是否可以更改文本颜色？
是否可以放置一个父 div 来覆盖颜色文本？（试过但没有用）
如何覆盖颜色？任何解决方法。（这可以通过下面提到的带有 !important 标记的 cmets 中的覆盖来完成）

手风琴反应组件接受面板

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

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

.test{
   color:white;
}

手风琴接受一个类名，但传递一个样式似乎也根本不起作用。我在每个级别都尝试过 Accordion.Title Tag。

【问题讨论】：

标签： semantic-ui-react

【解决方案1】：

您必须个性化您想要更改的合成器的类，并且您必须使用 !important “覆盖”语义 UI 的 css 类。

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

如果您想了解更多关于 !important (https://css-tricks.com/when-using-important-is-the-right-choice/) 的信息

和平

【讨论】：

谢谢，如果没有 !important 有没有办法做到这一点。这似乎有点hacky。想知道组件的设计是否允许这样做
!important 并不老套。只是想说一个元素比另一个元素具有优先级。您必须小心并创建唯一的 id 或类名才能使用它，就像您只更改一个元素一样 :)

【解决方案2】：

想通了。

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

    </Accordion.Content>
</Accordion>

意识到我可以只使用手风琴的单独组件并添加自己的元素并为其设置样式。

【讨论】：