React.js - 인라인 스타일(inline style)에서 !important 사용

!important 옵션을 사용하면 CSS 적용 우선순위를 무시하고 가장 높은 우선순위로 스타일을 적용할 수 있다.

 

 

html에서는 style 속성에 문자열 형태로 다음과 같이 작성하면 된다.

<div class="App">
  <p style="color: #ff0000 !important; font-family: Gmarket Sans !important">글씨에용</p>
</div>

html에서 인라인 스타일 important 적용

 

 

리액트에서는 html과는 달리 문자열이 아닌 CSSProperties 타입의 object 형태로 인라인 스타일을 지정한다.

 

하지만 아래처럼 important 옵션을 적용하려고 한다면 해당 스타일이 아예 적용되지 않는다.

const App = () => {
  return (
    <div className="App">
      <p style={{ color: '#ff0000 !important', fontFamily: 'Gmarket Sans !important' }}>글씨에용</p>
    </div>
  );
};

important 옵션으로 인해 적용되지 않는 스타일

 

아래 PR 코멘트를 읽어보면, 리액트 15부터 공식적으로 !important 옵션을 지원하지 않는다는 사실을 알 수 있다.

CSS: values with "!important" in 0.15 · Issue #6342 · facebook/react

 

style props로 적용하는 방법 대신, 우회적으로 ref를 사용하여 important 옵션 적용이 가능하다.

const App = () => {
  return (
    <div className="App">
      <p
        ref={(node) => {
          node.style.setProperty('color', '#ff0000', 'important');
          node.style.setProperty('font-family', 'Gmarket Sans', 'important');
        }}
      >
        글씨에용
      </p>
    </div>
  );
};

 

리액트에서 잘 적용된 모습