styletron 공식 웹사이트:
styletron의 GitHub 링크:
styletron-react
1. 소개
스타일트론(Styletron)은 일반적인 컴포넌트 지향(Component-Oriented) 스타일 도구입니다. CSS-in-js 카테고리에 속합니다. Styletron은 React와 잘 작동하지만 다른 프레임워크나 일반 JS와도 사용할 수 있습니다.
2. 사용
2.1 정적 스타일
예를 들어 다음 코드는 파란색 div를 정의합니다.
import {
styled } from "styletron-react";
const BlueBox = styled("div", {
background: "blue",
color: "white",
padding: "10px 50px",
})
그러면 다음과 유사한 CSS 코드가 생성됩니다.
._s12enoy73 {
background: blue;
color: white;
padding: 10px 50px;
}
그런 다음 코드에서 이 구성요소를 사용할 수 있습니다.
<BlueBox>Hello World</BlueBox>
注意: 클래스 이름은 자동으로 생성되므로 CSS 이름을 걱정할 필요는 없지만 문제는 CSS 이름이 자동으로 변경된다는 점입니다.안정적인 스타일이 필요한 경우 속성을 추가해야 합니다 data-test-id. 아래는 공식 홈페이지 스크린샷입니다.
2.2 동적으로 스타일 생성:
Styletron은 스타일의 동적 정의도 지원합니다. 예를 들어, 스타일의 기능을 사용하여 스타일을 동적으로 설정할 수 있습니다. 다음과 같이:
import {
styled } from "styletron-react";
const Box = styled("div", ({
size }) => ({
width: size,
height: size,
}));
<Box size='50px' />
위의 코드는 다음 CSS를 생성합니다.
._s1oczws6{
width: 50px;
height: 50px;
}
요약하다:
Styletron의 가장 일반적인 사용 시나리오는 React와 함께 사용하여 구성 요소 개발을 더 잘 실현할 수 있는 것입니다. 코드에서는 Styletron에서 제공하는 styled 메소드를 직접 사용하여 스타일을 정의하고, 이를 React의 컴포넌트와 결합하여 효율적인 컴포넌트 스타일을 생성할 수 있습니다.
Styletron은 또한 눈에 띄는 기능인 css-in-js를 제공합니다. 실제 개발 과정에서 특정 구성 요소에 스타일을 추가해야 하는 경우가 있는데, 이러한 스타일 규칙이 전역적으로 배치되면 CSS에 혼란이 발생합니다.
Styletron은 솔루션을 제공합니다. 추가해야 하는 CSS 코드를 js 파일에 넣은 다음 CSS 변수를 통해 동적으로 주입할 수 있습니다. 이 방법은 개발 효율성을 향상시킬 뿐만 아니라 스타일 충돌도 피할 수 있습니다.
styletron-engine-atomic: 스타일트론 엔진 인터페이스의 원자적 구현입니다.
