React Component Styling Options

Inline Style

Vanilla CSS

Styled Components

npm install --save styled-components

const Button = styled.a`
  /* This renders the buttons above... Edit me! */
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;

  /* The GitHub button is a primary button
   * edit this to target it specifically! */
  ${props => props.primary && css`
    background: white;
    color: black;
  `}
`

Styled-Components 공식 문서

CSS Modules

CSS 를 불러와서 사용할 때 해당 CSS 파일 내에 선언한 클래스가 자동적으로 고유한 클래스 네임으로 변경됨.

CSS Modules is not an official spec or an implementation in the browser but rather a process in a build step (with the help of Webpack or Browserify) that changes class names and selectors to be scoped (i.e. kinda like namespaced).

사용할 CSS 파일의 확장자명을 .module.css 로 저장한다.

이후 해당 CSS 파일을 js 파일에서 아래와 같이 불러오면 된다.
import styles from './example.module.css';

그 다음 styles 객체 안에 있는 값을 이와 같이 참조한다.

class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;
  }
})

documentation

참고할만한 영상

https://www.youtube.com/watch?v=pKMWU9OrA2s&ab_channel=HarryWolff (영어임)
https://www.youtube.com/watch?v=NMiEREulVLc&ab_channel=Academind (영어임)