React에서 Sass color props 구현

color props 기능을 통해 버튼에 각각 다양한 색을 입혀보겠습니다

function Button({ children, size, color })

기본 색상은 blue로 지정하겠습니다

Button.defaultProps = {
  size: "medium",
  color: "blue",
};

<button className={classNames("Button", size, color)}>

Button.scss에서 변수를 추가 했습니다

$pink: #f783ac;
$violet: #9775fa;

Button.js에서 classNames의 color 값에 blue가 들어왔을 때 주면 되니까 & 연산자를 통해 자기 자신을 선택하는 blue를 만들어줍니다

{classNames("Button", size, color)}

아래 코드처럼 넣어줍니다

&.blue {
    background: $blue;
    &:hover {
      //lighten은 색상의 밝기를 지정할 수 있다 //현재값은 색상을 10% 밝게 해준것
      background: lighten($blue, 10%);
    }
    &:active {
      //darken은 색상의 밝기를 어둡게 지정한다 // 현재값은 색상을 10% 어둡게 해준것
      background: darken($blue, 10%);
    }

생성한 변수 컬러값을 지정하기 위해 나머지 똑같이 2개 더 만들어주고 값을 변경합니다

&.blue {
    background: $blue;
    &:hover {
      //lighten은 색상의 밝기를 지정할 수 있다 //현재값은 색상을 10% 밝게 해준것
      background: lighten($blue, 10%);
    }
    &:active {
      //darken은 색상의 밝기를 어둡게 지정한다 // 현재값은 색상을 10% 어둡게 해준것
      background: darken($blue, 10%);
    }
  }

  &.pink {
    background: $pink;
    &:hover {
      background: lighten($pink, 10%);
    }
    &:active {
      background: darken($pink, 10%);
    }
  }

  &.violet {
    background: $violet;
    &:hover {
      background: lighten($violet, 10%);
    }
    &:active {
      background: darken($violet, 10%);
    }
  }

중복되는 코드가 있으므로 여기서 mixin을 생성하여 중복코드를 만들어줍니다

@mixin button-color($color) {
  background: $color;
  &:hover {
    background: lighten($color, 10%);
  }
  &:active {
    background: darken($color, 10%);
  }
}

이제 우린 button-color를 사용합니다

이렇게 @include로 불러와서 mixin의 변수와. 컬러변수를 넣어줍니다

  &.blue {
    @include button-color($blue);
  }

  &.pink {
    @include button-color($pink);
  }

  &.violet {
    @include button-color($violet);
  }

App.js에서 버튼 클래스를 총3개 만들어줍니다

      <div className="buttons">
        <Button size="large">Button</Button>
        <Button>Button</Button>
        <Button size="small">Button</Button>
      </div>

      <div className="buttons">
        <Button size="large">Button</Button>
        <Button>Button</Button>
        <Button size="small">Button</Button>
      </div>

      <div className="buttons">
        <Button size="large">Button</Button>
        <Button>Button</Button>
        <Button size="small">Button</Button>
      </div>
    </div>

컬러값 클래스를 생성해서 지정합니다

<div className="App">
      <div className="buttons">
        <Button size="large">Button</Button>
        <Button>Button</Button>
        <Button size="small">Button</Button>
      </div>

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

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

조금 여백을 주도록 하겠습니다

App.scss에 추가합니다

.buttons + .buttons {
    //같은 클래스가 있을 시, 오른쪽 클래스에 특정 스타일을 넣는다
    margin-top: 1rem;
  }