Daylogs/Javascript

React: !important 속성을 가진 스타일의 업데이트

ohgyun 2015. 6. 15. 10:09
발생일: 2015.06.03

키워드: React, 리액트, important

문제:
React 에서 `!important`가 포함된 스타일을 적용하려고 한다.

대략 아래와 같은 코드이다.

render() {
    var style = `{this.props.height} !important`;
    return (
        <div style={style}></div>
    );
}


헌데, 스타일 적용은 되는데, 변경된 이후에 업데이트가 되지 않는다.
왜일까?



해결책:

확인해보니, React 라이브러리에서 `!important` 를 설정하는 것까진 지원하고 있지만, 해당 속성을 업데이트하진 않고 있다고 한다.

페이스북 내에서도 이 속성을 설정할 지 말지에 대해 논쟁이 있는 것으로 보이고,
2015년 6월 현재 아직 이슈가 해결되지 않은 상태이다.


깃헙 이슈에서는 `style` 엘리먼트를 추가해서 직접 클래스를 넣는 방법으로 우회할 수 있다고도 했는데,
깔끔한 해결책이란 생각이 들진 않는다.

난 적용하려는 속성을 여러 개의 클래스로 정의해 적용하는 방식으로 우회했다.
(일반적인 경우에는 적합하지 않은 해결책이다)ti






반응형