CSS 작성 방법

CSS

기본 사용 방법

• 기본적으로 emotion을 사용한다.

// @emotion/react를 임포트해서 사용
import { css } from '@emotion/react';

• 길이가 길지 않은 컴포넌트는 아래와 같이 사용해도 된다.

export default function Button({ children }: ButtonProps) {
  return (
    <div css={css`/* css */`} onClick={onClick}>
      {children}
    </div>
  );
}

혹은

const style = {
  button: css`/* css */`,
};

export default function Button({ children }: ButtonProps) {
  return (
    <div css={style.button} onClick={onClick}>
      {children}
    </div>
  );
}

• 컴포넌트의 길이가 길어질 경우 관심사 분리를 위해 컴포넌트와 같은 폴더에 style.ts 파일로 css를 분리한다.

// Component/style.ts
import { css } from '@emotion/react';

export const style = {
  button: css`/* css */`,
};

// Component/index.ts
import { style } from './style';

export default function Button({ children }: ButtonProps) {
  return (
    <div css={style.button} onClick={onClick}>
      {children}
    </div>
  );
}

• next.js의 page폴더 하위에 작성하는 페이지 컴포넌트는 파일을 분리하지 않는다.

테마

• 전역 테마에 존재하는 색을 사용하는 경우 아래와 같이 작성한다.

import { Theme, css } from '@emotion/react';

export const style = {
  button: (theme: Theme) => css`
    color: ${theme.background};
  `,
};

import { style } from './style';

export default function Button({ children }: ButtonProps) {
  return (
    <div css={style.button/* 함수는 emotion에서 호출하기때문에 호출하지 않는다. */} onClick={onClick}>
      {children}
    </div>
  );
}

• 기본 테마와 함께 다른 인자를 넘겨야 할 경우 아래와 같이 작성한다.

import { Theme, css } from '@emotion/react';

export const style = {
  button: (type: boolean) => (theme: Theme) => 
    css`
      color: ${type ? theme.background : theme.foreground};
    `,
};

import { style } from './style';

export default function Button({ children }: ButtonProps) {
  return (
    <div css={style.button(true)} onClick={onClick}>
      {children}
    </div>
  );
}

• 컴포넌트 내부에서 전역 테마가 필요할 경우 emotion의 useTheme 훅을 사용한다.

import { style } from './style';
import { useTheme } from '@emotion/react';

export default function Button({ children }: ButtonProps) {
  const theme = useTheme();

  return (
    <div css={style.button(theme.background)} onClick={onClick}>
      {children}
    </div>
  );
}