[React] Emotion CSS 사용

 

props로 전달된 값에 따라 style을 지정하고 싶을 때

작성 해야 할 style이 길 경우 css의 템플릿 리터럴을 사용하여 작성할 수 있다.

import { css } from "@emotion/react";

const Button = styled.button<ButtonProps>`
  display: ${({ block })=> block? 'block': 'inline-block'}

  ${({ styleType }) => styleType && css`
    background-color: black;
    color: white;
  `}
`;

 

 

Global style 적용

Emotion의 Global을 사용하여 reset할 style울 지정할 수 있다.

import { css, Global } from "@emotion/react";


const GlobalStyle = css`
  body {
    background-color: #f8f9fa;
  }
`;

const Home = () => {
  return (
    <div>
      <Global styles={GlobalStyle} />
    </div>
  );
};

export default Home;