[React] style

1. css import 하기

import "./Card.css"

 

2. sass module 사용하기

❓ sass module의 장점 ❓

: css 적용을 위한 classname이 중복이 되지 않도록 하나뿐인 이름을 지정할 수 있다.

// Card.module.scss
.title { 
     color : red;

     > span {
          background-color : blue;
     }
}
.hello { .... }

// Card.jsx
import "./Card.module.scss"
....
    return (
         <div  className={`${style.title} ${style.hello}`}/>
    );
....

 

3. styled-components 라이브러리 사용하기

https://styled-components.com/ 에서 인스톨 받은 후 아래처럼 쓸 수 있다.

- 이름 짓기가 고통스러워...ㅠㅠㅠ

import { styled } from "styled-components"

function Card () {
   const Wrapper = styled.div`
       ${(props) => (props.isSelected ? "color : black;" : "color: orange;")} // 동적 스타일링 가능
        color : red;
        background-color : blue;
   `;

    return (
         <Wrapper />
    );
}