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
반응형