[React] React에서 CSS 사용

※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;