기존에 리액트로 작성할 때 인라인으로 스타일을 넣고 조건에 맞춰 값을 넣은 적은 있었다.

예를들어 state 에 abc 값이 있으면 0, 없으면 100%의 width로 지정한다고 할 때,

<div style={{width: this.state.abc ? 0 : '100%'}}>

이렇게 쓸 수 있다.
그런데 이렇게 되면 강제로 width를 꼭 이 곳에서 처리되게 된다. 다른 css 파일들에서 이 영역에 스타일을 붙였다면 그 스타일들은 무시되고 위에 인라인으로 처리된 것이 적용될 것이다.

그냥 기존 스타일은 적용시키되 특정 조건일 때만 특정값을 넣고 싶을 때는 아래처럼 작성한다.

<div style={this.state.abc ? {width: '100%'} : {}>

기존 다른 인라인 스타일과 혼합할 때는 아래처럼 작성한다.

<div style={{ marginLeft : 10, this.state.abc ? {width: '100%'} : {} } >

한가지 조건이 아닌 여러 조건에 맞춰 인라인 스타일을 추가하고 싶을 때는 아래처럼 작성한다.

<div style={{ marginLeft : 10, ...(this.state.abc ? {width: '100%'} : {}), ...(this.state.def ? {height: '100%'} : {}) } >