[React] 리액트에서 자주 쓰이는 CSS

postCSS

css파일명에 module.css를 붙이고 불러올 때 styles로 임포트 후 className에 {style.클래스명}으로 사용

import styles from './Button.module.css';

export default function Button () {
    return <button className={styles.button}></button>
}

styled components

자바스크립트에서 css를 사용하게 해주는 라이브러리

 

다운로드 방법

• yarn add styled-components
• npm i styled-components

import styled, {css} from 'styled-components';

const Container = styled.div`
  display: flex;
`

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid #3c5b69;
  color: #b9eaff;
  margin: 0 1em;
  padding: 0.25em 1em;
  ${(props) => 
  props.primary && 
  css`
    background: #009cd5;
    color: white;
  `};
`

export default function Monster() {

  return (
    <>
        <Container>
          <Button>Normal</Button>
          <Button primary>Primary</Button>
        </Container>
    </>

    }

tailwindcss

정해진 클래스명을 추가해줌으로 원하는 스타일 적용 가능한 css 라이브러리

순수 CSS

 

다운로드 방법

• yarn add -D talwindcss
• npm i -D taliwincss

  <div class="w-96 bg-white shadow rounded">
      w-96
  </div>