2017-08-24 84 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> 

認識到我可以使用手風琴的獨立組件並添加我自己的元素並對其進行設計。