IT/React
[React] React에서 CSS 사용
시린스
2023. 6. 22. 11:46
반응형
※Sass 사용
import './scss/style.scss';
이런식으로 바로 사용 할 수 있음. (--wacth를 안해도 됨)
import './scss/style.scss';
function App() {
return (
<div className='wrap'>
<h1>TITLE1</h1>
<h1>TITLE2</h1>
</div>
);
}
export default App;
.wrap {
border: 1px solid red;
}
변수를 사용하여 선언 하거나 Style에 바로 입력
function App() {
const fontStyle = {
color: 'aqua',
fontSize: 60,
fontWeight: 'normal',
};
return (
<div className='wrap'>
{/* 미리 스타일 객체를 변수에 선언후 가상돔에 연결 */}
<h1 style={fontStyle}>TITLE1</h1>
{/* 가상돔에 직접 객체 리터럴 형식으로 스타일 적용 가능 */}
<h1 style={{ color: 'orange', fontSize: 30 }}>TITLE2</h1>
</div>
);
}
export default App;