React Styling

Styling

CSS

.section {
  width: 100%;
}
.section .list {
  padding: 20px;
}
.section .list li {
  float: left;
}
.btn {
  position: absolute;
}
.btn.active {
  color: red;
}

SCSS

.section {
  width: 100%;
  .list {
    padding: 20px;
    li {
      float: left;
    }
  }
}
.btn {
  position: absolute;
  &.active {
    color: red;
  }
}

CSS Module

• CSS 파일에 선언한 클래스 이름들이 모두 고유해집니다.
• 고유 CSS 클래스 이름이 만들어지는 과정에서는 파일 경로, 파일 이름, 클래스 이름, 해쉬값 등이 사용 될 수 있습니다.
• 클래스 이름에 대하여 고유한 이름들이 만들어지기 때문에, 실수로 CSS 클래스 이름이 다른 관계 없는 곳에서 사용한 CSS 클래스 이름과 중복되는 일에 대하여 걱정 할 필요가 없습니다.

import styles from "./Box.module.css";

<div className={styles.Box} />

// ${styles.one} ${styles.two}
// ${styles.one} ${condition ? styles.two : ''}

CSS Module 별도로 설치해야 할 라이브러리는 없습니다. 이 기능은 webpack 에서 사용하는 css-loader 에서 지원되는데, CRA 로 만든 프로젝트에는 이미 적용이 되어있으니 바로 사용하면 됩니다.

➕ classnames 라이브러리 적용

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// bind version (for css-modules)
const styles = { foo: 'abc', bar: 'def', baz: 'xyz' };
const cx = classNames.bind(styles);
const className = cx('foo', ['bar'], { baz: true }); // => 'abc def xyz'

Tailwind CSS

<div class="flex pt-4 text-center rotate-90" />

css-in-js

Styled Components

const Button = styled.a<{ $primary?: boolean; }>`
  width: 10rem;
  &:active {
    opacity: 0.85;
  }
  ${props => props.$primary && css`
    background: yellow;
    color: white;
  `}
`;
const TomatoButton = styled(Button)`
  color: tomato;
`;

// 또다른 사용 예시
// background: ${props => props.$primary ? "#BF4F74" : "white"};
// color: ${props => props.$inputColor || "#BF4F74"};

<Button $primary />
<TomatoButton />

Emotion

import { css } from '@emotion/css';
<div
    className={css`
      padding: 32px;
    `}
/>

import styled from '@emotion/styled'
const Button = styled.button`
  padding: 32px;
`;

twin.macro

Tailwind + css-in-js

import 'twin.macro';
const Input = () => <input tw="border hover:border-black" />

// 조건부 tw
import tw from 'twin.macro';
const Input = ({ hasHover }) => (
  <input css={[tw`border`, hasHover && tw`hover:border-black`]} />
);

// Styled Components
const Input = tw.input`border hover:border-black`;
const PurpleInput = tw(Input)`border-purple-500`;