facebook/stylex

어떤 프로젝트인가요?

핵심 기능

• 01stylex.create를 사용해 JavaScript 객체로 스타일을 정의합니다.
• 02stylex.props를 통해 요소에 스타일을 적용합니다.
• 03Babel 플러그인과 PostCSS, Rollup, ESLint 통합을 제공합니다.
• 04빌드 워크플로를 위한 CLI를 포함합니다.
• 05공식 문서 사이트를 제공합니다.

활용 사례

• 스타일 정의를 컴포넌트와 함께 두고 범위를 지정해 React 또는 다른 JavaScript UI를 스타일링합니다.
• Rollup이나 PostCSS를 사용해 기존 프런트엔드 프로젝트에 빌드 시점 스타일링 파이프라인을 추가합니다.
• StyleX ESLint 플러그인으로 코드베이스의 스타일 규칙을 적용합니다.

빠른 시작

1. 1

   npm에서 StyleX 패키지를 설치합니다

   npm install @stylexjs/stylex
2. 2

   stylex.create로 스타일을 정의하고 stylex.props로 적용합니다

3. 3

   빌드 도구 설정 방법은 문서 웹사이트에서 확인합니다

사용 전 알아둘 점

• !README에는 스타일 컴파일 설정 방법이 없으므로 빌드 도구 통합은 별도로 구성해야 합니다.
• !개발용 monorepo이므로 기여하려면 전체 yarn workspace를 설치해야 합니다.

토픽

자주 묻는 질문

stylex은(는) 무엇인가요?

Facebook이 사용자 인터페이스에서 최적화된 atomic CSS 스타일을 정의할 수 있도록 만든 JavaScript 스타일링 라이브러리입니다. StyleX는 사용자 인터페이스의 스타일을 정의하는 JavaScript 라이브러리입니다. 개발자는 stylex.create로 스타일을 선언하고 stylex.props로 적용합니다. stylex.props는 요소에 지정할 클래스 이름을 반환합니다.

stylex은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

stylex은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

stylex은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. stylex의 마지막 커밋은 2026년 10월 21일입니다.

stylex은(는) 어디에 사용할 수 있나요?

스타일 정의를 컴포넌트와 함께 두고 범위를 지정해 React 또는 다른 JavaScript UI를 스타일링합니다. Rollup이나 PostCSS를 사용해 기존 프런트엔드 프로젝트에 빌드 시점 스타일링 파이프라인을 추가합니다. StyleX ESLint 플러그인으로 코드베이스의 스타일 규칙을 적용합니다.

stylex는 어떻게 설치하나요?

npm에서 StyleX 패키지를 설치합니다: npm install @stylexjs/stylex stylex.create로 스타일을 정의하고 stylex.props로 적용합니다 빌드 도구 설정 방법은 문서 웹사이트에서 확인합니다

stylex은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/facebook/stylex