[리액트(React) Study Log] [Person App-026] Using Radium for Media Queries
1. Person.js 파일에 inline style media query 를 적용해보자.
- StyleRoot component 를 import 해서 최상위 파일(App.js)의 최상위 JSX object 를 <StyleRoot> 로 감싼다.
// src-App.js
...
import Radium, { StyleRoot } from 'radium';
...
return (
<StyleRoot>
<div className="App">
<h1>Hi, I'm React App</h1>
...
{persons}
</div>
</StyleRoot>
...
- Person.js 파일에 media query style 객체를 생성하고 {style} 로 적용.
//src-Person-Person.js
...
const person = (props) => {
const style = {
'@media (min-width: 500px)' : {
width: '450px'
}
};
return (
<div className="Person" style={style}>
...
2. media query 적용 결과
- 500px 화면 크기까지는 Person component width가 450px, 화면이 500px 보다 작아지면 Person component width가 화면의 60%(css 파일의 .Person 기본 설정값)를 차지하도록 변경됨.