시맨틱 UI와 사용자 정의 CSS 클래스

Question

나는 semantic-ui-react를 사용하는 프로젝트를 가지고 있습니다. 프로젝트는 webpack으로 빌드되고 sassLoader가 활성화되어 있습니다.

나는 다음 코드 반응 한 구성 요소 :

<Label className="test"> 
    sample text 
</Label> 

것은 내가이 구성 요소에 의해로드 된 SCS들 파일에 다음 코드가있다 :

.test { 
    color: red; 
} 

샘플 텍스트가 빨간색으로 표시되지 않습니다 . 두 가지 가능한 해결책을 알고 있습니다 - 특이성을 높이거나 CSS 규칙 뒤에 important!을 던지십시오. 내가 알고 싶습니다 이유가이 일이 일어나고 있습니다. 시맨틱 UI의 네이티브 버전을 사용할 때 왜 이런 일이 발생하지 않습니까?

지원하려면, 여기에 크롬의 관리자에서 스크린 샷입니다 :

Answer 1

나는 시맨틱 UI 파일 클래스 조합 을 사용하면 실질적으로 semantic.css에, 당신의 자신의 질문에 대답 생각합니다. ui.label에는 미리 정의 된 색상이 있습니다 rgb (0,0,0, .6) - 이들은 React 요소 클래스 레이블에서 사용합니다. 일류의 색 파라미터는 제 2 색 파라미터 소중 :

은 .ui.label 때문에은 (http://www.standardista.com/css3/css-specificity/ 여기서, 2 종류 대 1 개 클래스 이에 대한 놀라운 인포 그래픽이다) .test보다 구체적이다.

필자는 시맨틱 UI와 React없이 이것을 시도했지만 동일한 결과가 발생했습니다.

.test { 
    color: red; 
} 

<div class="ui label test">not a color red</div>