2017-08-24 59 views
1

我目前正在尝试使用Semantic UI React的手风琴组件,无法弄清楚如何将颜色和箭头更改为白色。如何更改语义UI中的字体颜色React Accordion

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

在CSS中,你可以看到小部件有造型,它配置为黑色。

  1. 该组件是否有改变文本颜色的方法?
  2. 是否有可能把父div覆盖颜色文本? (试过 ,但没有工作)
  3. 你会如何覆盖颜色?任何解决方法。 (这可以作为与评论下面提到的覆盖来完成!重要的标记)

手风琴反应成分发生在面板

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。

enter image description here

example

回答

1

你有个性化的类,你想改变composant的,你有语义的UI使用!重要的是“压倒一切”的CSS类。

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

如果你想要更多的信息!重要(https://css-tricks.com/when-using-important-is-the-right-choice/

和平

+0

谢谢,有没有办法做到这一点!重要的。这似乎有点哈克。不知道组件是否被设计成允许这个 – darewreck

+0

!重要的是不hacky。只是想说一个元素比另一个元素有优先权。你必须小心,并创建独特的ID或类名称来使用它,就像你只改变一个元素:) – SD3L

0

想通了。

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

    </Accordion.Content> 
</Accordion> 

认识到我可以使用手风琴的独立组件并添加我自己的元素并对其进行设计。