Styled-Components 버튼 스타일 추가 설정

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

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

outline은 true or false Boolean값으로 정해지기 때문에 defaultProps 설정을 전달하지 않는다면 undefined가 되면서 false와 똑같이 간주하게 됩니다

색상 쪽에서 지정하겠습니다

${(props) =>
        props.outline &&
        css`
          color: ${selected};
          background: none;
          border: 1px solid ${selected};
          &:hover {
            background: ${selected};
            color: white;
          }
        `}

이제 이 값을 App.js에서 사용하겠습니다

ButtonGroup를 하나 복사해줍니다

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

outline만 적거나 outline={true}를 적거나 값은 똑같습니다

이제 fullWidth를 생성합니다

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

바로 바깥에서 구현해보겠습니다

const fullWidthStyle = css`
  ${(props) =>
    props.fullWidth &&
    css`
      width: 100%;
      justify-content: center;

      & + & {
        margin-left: 0;
        margin-top: 1rem;
      }
    `}
`;

  ${fullWidthStyle}

App.js에서 사용해보겠습니다

ButtonGroup 복사하고 fullWidth를 넣어줍니다 size는 모두 large로 변경합니다

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

 Button.js에서 & + & 값은 꼭 fullWidthStyle보다 위에 있어야합니다 그 이유는 fullwidthStyle에서 값을 처리했는데

나머지 밑에 스타일이 fullwidthStyle를 덮어씌우기 때문에 값이 깨지게됩니다