css in js 인터페이스

export const Button = styled.button(
  {
    borderRadius: 1,
  },
  {
    variant: {
      primary: {
        backgroundColor: "red",
      },
      muted: {
        backgroundColor: "gray",
        opacity: 0.5,
      },
    },
    size: {
      small: {
        fontSize: 2,
      },
      big: {
        fontSize: 4,
      },
    },
  }
);

 

흥미로운 css in js 인터페이스

첫번째 인자에는 공통 속성을 정의하며 두번째 속성에는 키 밸류 형태로 사용할 수 있는 동적 속성을 제공하고 있다.

사용 방법은 아래와 같다.

<Button variant="primary" size="small"></Button>​

 

https://github.com/christianalfoni/stitches/tree/master/packages/styled