React에서 Sass 추가 Props 설정

기존 props에서 outline, fullWidth props를 추가

Button.js에서 추가

function Button({ children, size, color, outline, fullWidth })

outline, fullWidth는 조건부이며, true or false에 따라 스타일에 들어갑니다

객체로 생성해줍니다

className={classNames("Button", size, color, {
        outline,
        fullWidth,
      })}

만약 props로 받아온 outline 값이 true라면 className에 outline값이 들어가게됩니다

boolean은 값이 없으면 undefined고 undefined라면 classNames에서 처리하지 않습니다

Button.scss의 mixin에서 추가값지정

&.outline {
    color: $color;
    background: none;
    border: 1px solid $color;
    &:hover {
      background: $color;
      color: white;
    }
  }

이제 아래에서 지정한 blue, pink, violet에 대한 outline 속성도 완료되었습니다

fullWidth를 설정합니다

&.fullWidth {
  width: 100%;
  justify-content: center;
  & + & {
    margin-left: 0;
    margin-top: 1rem;
  }
}

App.js에서 확인해보겠습니다

className buttons를 하나 더 만들고 Outline를 넣습니다

<div className="buttons">
        <Button size="large" outline={true}>
          Button
        </Button>
        <Button color="pink" outline={true}>
          Button
        </Button>
        <Button color="violet" outline={true} size="small">
          Button
        </Button>
      </div>

fullWidth 적용

buttons 추가 생성

<div className="buttons">
        <Button size="large" fullWidth>
          Button
        </Button>
        <Button color="pink" fullWidth>
          Button
        </Button>
        <Button color="violet" fullWidth size="small">
          Button
        </Button>
      </div>