[리액트기초] style 입히기

◼ style 입히기  

리액트에는 style 라이브러리가 있어서 사용을 하지만

기본적으로 사용할수 있는 방법을 먼저 적어봅니다.

 

React style 라이브러리

styled-components
emotion
Material-UI
Ant Design
Tailwind CSS

 

 

우선순위
인라인, css모듈, 외부 css, 프레임워크/ 라이브러리 css 등등 있있습니다.

1. 인라인
2. css모듈
3. 외부 css 

 

 

◼ 인라인 스타일로 적용하기   

const divStyle = {
  color: 'blue',
  backgroundColor: 'lightgray' // '-' 대신 카멜기법으로 작성한다
};

function App() {
  return (
    <div style={divStyle}>Hello, World!</div> // style에 연결하여 사용
  );
}

 

 

---

 

 

◼ 외부 css 사용하기  

/* styles.css */
.myDiv {
  color: blue;
  background-color: lightgray;
}



/* App.js */

// 이 페이지 전체에서 사용된다, component 있다면 자식도 영향을 받는다
import './styles.css'; 
function App() {
  return (
    <div className="myDiv">Hello, World!</div>
  );
}

 

 

 

---

 

 

 

◼ css 모듈 사용하기  

/* styles.module.css */ 파일이름.module.css 파일내에 클래스 이름으로 접근하여 사용할수 있다
.myDiv {
  color: blue;
  background-color: lightgray;
}


/* App.css */
import styles from './styles.module.css';
function App() {
  return (
    <div className={styles.myDiv}>Hello, World!</div> //myDiv 클래스를 불러서 사용
  );
}