1

我目前正在尝试使用 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;
}

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

在此处输入图像描述

例子

4

2 回答 2

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/）

和平

于 2017-08-24T07:59:38.487 回答
0

弄清楚了。

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

    </Accordion.Content>
</Accordion>

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

于 2017-08-24T15:18:44.330 回答