반응식 js 코드에서 CSS 선택기 속성 값을 동적으로 변경하는 방법은 무엇입니까?

Question

특정 선택자의 반응 구성 요소에서 색상을 동적으로 변경해야합니다. 하는 SCS (사용 말대꾸)에서 나는 다음과 같은 규칙이 있습니다

나는 그것을 변경할

foo.bar.var * { 
    color: blue; 
} 

는 노란색, 빨간색 또는 뭔가 다른 것으로, 코드 반응을. 내가 의 선택! 모든 subchilds 신청을해야합니다 원인

나는

어떤 기본 방법이 있나요) = 요소 style 속성을 사용하지 못할? 아니면 라듐을 사용해야합니까? 아니면 이것에 대한 비슷한 라이브러리가 있습니까? 어쩌면 css-next 일부 hove가 이것을 도울 수 있습니까?

나는 색상 선택기를 가지고, 내가 어떤 답변자에 대한 모든 색상 = (

에 대한 클래스 스타일을 쓰기 어차피 참고 :

그래서 내가 어떤하는 SCS 파일에서 선택이, 그 어떤 루트로 수입 JS .class * {color: $somecolor}에 제출하고 난 모든 NESTE의 색상 선택기에

어쩌면 내가 어떻게 든 설정할 수있는 선택을 색상을 따기 동안, 그 선택의 $ somecolor을 변경해야합니다 d 안에 style 속성? 또는 style 소품의 모든 중첩 항목에 CSS 스타일을 재귀 적으로 적용하는 방법이 있습니까?

Answer 1

이것은 어리석게 들릴 수 있습니다. 하지만이 일을합니까?

import myCss from './mydesign.css'; 

myCss.foo.bar.var = "your color" 

Answer 2

당신이 지금까지 시도 무엇

class MyComponent extends React.Component { 
 
    render() { 
 
    const yellow = true // Your condition 
 
    
 
    return(
 
     <div className={`foo bar var ${yellow && 'yellow'}`} 
 
     My item 
 
     </div> 
 
    ) 
 
    } 
 
}

.foo.bar.var { 
 
    & * { 
 
    color: blue; 
 
    } 
 
    &.yellow * { 
 
    color: yellow; 
 
    } 
 
}