[React] Component Styling

Component Styling

• 일반 CSS file (React defaults)
  • CSS 파일 import 하여 사용
    • import ‘./App.css’;
    • className=’xxx’
  • import styles from ‘./App.css’
    • className={styles.App} 또는
    • className={${styles.active} ${styles.bold}}
  • CSS 모듈
    • import styles from ‘./App.module.css’;
    • .xxx
    • App_xxx__<uniqId> (파일명_클래스_해시값)
    • 클래스명 중복 방지 및 해당 컴포넌트에서만 사용된다.
• styled-components 모듈
  • const Ul = styled.<tag>list-style: none;...;
    • <ul>...</ul>
    • <Ul>...</Ul>
  • const StyledCompo = styled(Compo)css 구문 ...;
    • <StyledCompo … />
    • Compo = ({className})
    • <div className={className} …
• classnames 모듈
  • import classNames from 'classnames';
    • <div classNames={classNames('foo', {'bar': isActive}, isActive ? 'xxx' : '')}>
  • import classNames from 'classnames/bind';
    • const cx = classNames.bind(styles);
    • <div className={cx('cls', 'bbb', {ccc: true})}>
    • <div className={({ isActive }) => cx({ active: isActive })}>
• jss 모듈
• emotion 모듈