Uma biblioteca CSS-in-JS flexível e performática para estilizar apps com estilos em string ou objeto e composição previsível.
facebook/stylex
Uma biblioteca de estilos JavaScript do Facebook para definir estilos CSS atômicos e otimizados em interfaces de usuário.
- Estrelas
- 10,424
- Forks
- 502
- Issues abertas
- 239
- Último commit
- há 8 horas
O que é?
StyleX é uma biblioteca JavaScript para definir estilos em interfaces de usuário. Os desenvolvedores declaram estilos com stylex.create e os aplicam com stylex.props, que retorna os nomes de classe a serem associados aos elementos.
O projeto é um monorepo de desenvolvimento que inclui o pacote principal stylex, além de um plugin Babel, uma CLI, plugins para PostCSS, Rollup e ESLint, um parser de valores de estilo e um site de documentação em stylexjs.com. Os exemplos mostram como integrar a ferramenta a ferramentas de build.
Os estilos são escritos como objetos JavaScript, e as ferramentas os compilam durante a etapa de build.
Recursos principais
- 01Define estilos como objetos JavaScript com stylex.create.
- 02Aplica estilos aos elementos por meio de stylex.props.
- 03Inclui um plugin Babel e integrações para PostCSS, Rollup e ESLint.
- 04Inclui uma CLI para o fluxo de build.
- 05Disponibiliza um site oficial de documentação.
Casos de uso
- Aplicar estilos a uma interface React ou de outra tecnologia JavaScript, com definições de estilo co-localizadas e com escopo definido.
- Adicionar um pipeline de estilos executado no build a um projeto frontend existente, usando Rollup ou PostCSS.
- Impor convenções de estilo em uma base de código com o plugin ESLint do StyleX.
Início rápido
- 1
Instale o pacote StyleX pelo npm
npm install @stylexjs/stylex - 2
Defina estilos com stylex.create e aplique-os com stylex.props
- 3
Consulte o site da documentação para configurar a ferramenta de build
Antes de usar
- O README não explica como configurar a compilação dos estilos; a integração com a ferramenta de build precisa ser configurada separadamente.
- Este é um monorepo de desenvolvimento, então, para contribuir, é preciso instalar todo o workspace do yarn.
Tópicos
Perguntas frequentes
- O que é stylex?
- Uma biblioteca de estilos JavaScript do Facebook para definir estilos CSS atômicos e otimizados em interfaces de usuário. StyleX é uma biblioteca JavaScript para definir estilos em interfaces de usuário. Os desenvolvedores declaram estilos com stylex.create e os aplicam com stylex.props, que retorna os nomes de classe a serem associados aos elementos.
- stylex é gratuito? Qual é a licença?
- stylex é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
- stylex ainda é mantido?
- Manutenção ativa. O último commit de stylex foi em 21 de out. de 2026.
- Para que posso usar stylex?
- Aplicar estilos a uma interface React ou de outra tecnologia JavaScript, com definições de estilo co-localizadas e com escopo definido. Adicionar um pipeline de estilos executado no build a um projeto frontend existente, usando Rollup ou PostCSS. Impor convenções de estilo em uma base de código com o plugin ESLint do StyleX.
- Como instalar stylex?
- Instale o pacote StyleX pelo npm: npm install @stylexjs/stylex Defina estilos com stylex.create e aplique-os com stylex.props Consulte o site da documentação para configurar a ferramenta de build
- Onde consigo stylex?
- O código-fonte e as instruções de instalação estão no GitHub: https://github.com/facebook/stylex
Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.
Projetos relacionados
Biblioteca JavaScript para criar interfaces interativas com componentes compostos, na web, no servidor e em plataformas nativas.
Framework front-end popular com componentes em HTML, CSS e Sass/JavaScript para criar sites responsivos e mobile-first.
Framework de componentes de UI com Material Design para Vue, com componentes responsivos e criados artesanalmente para desenvolver aplicações web.
Framework Rust para criar apps web, desktop e mobile a partir de uma única base de código, com componentes no estilo React e signals.
Um template inicial para criar apps desktop multiplataforma com Electron, React, TypeScript e Vite.