Styled-Components 각각의 버튼 사이즈 조정 하는 방법

Button.js에서 size props를 생성합니다

function Button({ children, color, size, ...rest }) {
  return (
    <StyledButton color={color} size={size} {...rest}>
      {children}
    </StyledButton>
  );
}

//Button 기본값 설정
Button.defaultProps = {
  color: "blue",
  size: "medium",
};

사이즈 props에 따라 각기 다른 값을 주겠습니다

props.size가 large라면 css에 어떤값을 줄 것이냐 라는 의미입니다

${(props) =>
    props.size === "large" &&
    css`
      height: 3rem;
      font-size: 1.25rem;
    `}

2번 복사해서 large, medium, small을 만들고 값을 지정하겠습니다

 /* 크기 */
${(props) =>
    props.size === "large" &&
    css`
      height: 3rem;
      font-size: 1.25rem;
    `}

${(props) =>
    props.size === "medium" &&
    css`
      height: 2.25rem;
      font-size: 1rem;
    `}

${(props) =>
    props.size === "small" &&
    css`
      height: 1.75rem;
      font-size: 0.875rem;
    `}

colorStyles를 바깥으로 빼서 분리한것처럼 props.size도 똑같이 해보겠습니다

크기에 대한 값을 sizeStyles 변수를 생성 후 넣어주겠습니다

const sizeStyles = css`
  /* 크기 */
  ${(props) =>
    props.size === "large" &&
    css`
      height: 3rem;
      font-size: 1.25rem;
    `}

  ${(props) =>
    props.size === "medium" &&
    css`
      height: 2.25rem;
      font-size: 1rem;
    `}

${(props) =>
    props.size === "small" &&
    css`
      height: 1.75rem;
      font-size: 0.875rem;
    `}
`;

이렇게 넣어줍니다

  /* 크기 */
  ${sizeStyles}

App.js에서 사이즈를 주겠습니다

const ButtonGroup = styled.div`
  & + & {
    margin-top: 1rem;
  }
`;

Button을 감싸줍니다

function App() {
  return (
    <ThemeProvider theme={{ palette }}>
      <AppBlock>
        <ButtonGroup>
          <Button>BUTTON</Button>
          <Button color="pink">BUTTON</Button>
          <Button color="violet">BUTTON</Button>
        </ButtonGroup>
      </AppBlock>
    </ThemeProvider>
  );
}

Button에 사이즈를 지정합니다

<Button color="pink" size="large">
	BUTTON
</Button>
<Button>BUTTON</Button>
<Button color="violet" size="small">
	BUTTON
</Button>

Button.js에서 보면 스타일링한 값 중 중복된 값이 있습니다 이걸 객체를 만들어서 코드의 가독성을 높여보겠습니다

const sizes = {
  large: {
    height: "3rem",
    fonsSize: "1.25rem",
  },
  medium: {
    height: "2.25rem",
    fontSize: "1rem",
  },
  small: {
    height: "1.75rem",
    fontSize: "0.875rem",
  },
};

크기에 적었던 부분들을 모두 날려줍니다

const sizeStyles = css``;

이렇게 작성해줍니다

const sizeStyles = css`
  /* 크기 */
  ${({ size }) => css`
    height: ${sizes[size].height};
    font-size: ${sizes[size].fontSize};
  `}
`;

사이즈별로 객체를 만들고 height, fontSize 정보를 넣어주고 props에 size 정보를 읽어와서 sizes 변수 안에 있는 데이터를 찾고

맞는 값을 넣어주도록 설정했습니다