9장. 컴포넌트 스타일링

1. CSS

2. Sass, Scss

3. CSS Module

4. Styled-component

<Box color="black">{...}</Box>

import styled, { css } from "styled-components";

const Box = styled.div`
  background: ${(props) => props.color || "blue"};  -> props로 값을 전달해주어서 적용시킬 수가 있음.
  padding: 1rem;
  display: flex;
  width: 1024px;
  margin: 0 auto;
  @media (max-width: 1024px) {
    width: 768px;
  }
  @media (max-width: 768px) {
    width: 100%;
  }
`;

const Button = styled.button`
  background: white;
  color: black;
  border-radius: 4px;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 1rem;
  font-weight: 600;
  &:hover {
    background: rgba(255, 255, 255, 0.9);
  }
  // props에 따른 조건부 스타일링
  ${(props) =>
    props.inverted &&
    css`
      background: none;
      border: 2px solid white;
      color: white;
      &:hover {
        background: white;
        color: black;
      }
    `};
  & + button {
    margin-left: 1rem;
  }
`;

const StyledComponent = () => (
  <Box color="black">
    <Button>안녕하세요</Button>
    <Button inverted={true}>테두리만</Button>
  </Box>
);

export default StyledComponent;

- Tagged Template Literal

참고: https://velog.io/@kdo0129/Tagged-Template-Literal

Tagged Template Literal

- 브라우저의 가로 크기에 따라 다른 스타일을 적용하기 위해서는 일반 CSS를 사용할 때와 똑같이 media 쿼리를 사용하면 된다!