CSS-in-JS란 무엇입니까?

CSS-in-JS란 무엇입니까?

따라서 emotion , styled-components 및 goober 와 같은 CSS-in-JS 프레임워크 및 라이브러리에 대해 모두 들어보셨을 것입니다.

CSS-in-JS란?

CSS-in-JS 라이브러리는 다양한 패턴을 따릅니다. 그러나 일반적으로 한 가지만 허용합니다.

JavaScript에서 고유한 CSS 클래스를 생성할 수 있습니다.

기본적으로 일반적으로 다음과 같이 사용합니다.

const myButtonsClassName = cssInJsLibraryFunctionHere({
    color: "red",
    "text-align": "center"
});

// Or with tagged template literals

const myButtonsClassName = css`
    color: red;
    text-align: center;
`

일부 라이브러리( styled-components )를 사용하면 해당 스타일에서 React 구성 요소를 생성하고 스타일 지정을 위한 동적 값을 생성할 수 있습니다.

const Button = styled.button`
    color: ${({ dark }) => dark ? "dark" : "white"}
`;

<Button />
<Button dark />

결론

CSS-in-JS는 JavaScript 내부에 CSS 스타일을 작성할 수 있는 패턴입니다.