{"id":64051,"date":"2023-10-16T15:36:40","date_gmt":"2023-10-16T18:36:40","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=64051&#038;post_type=knowledgebase&#038;preview_id=64051"},"modified":"2025-10-01T17:01:03","modified_gmt":"2025-10-01T20:01:03","slug":"jss","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/jss\/","title":{"rendered":"Crie o Estilo do seu Site React com JSS"},"content":{"rendered":"<p>Estilos permitem definir a apar\u00eancia do seu site e criar uma marca coesa e est\u00e9tica. Embora v\u00e1rias abordagens usem CSS (Cascading Style Sheets) para criar estilos em p\u00e1ginas da web, as solu\u00e7\u00f5es <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-javascript\/\">baseadas em JavaScript<\/a> s\u00e3o mais flex\u00edveis e oferecem a voc\u00ea mais controle do que o CSS padr\u00e3o.<\/p>\n<p>Um m\u00e9todo popular \u00e9 usar o JavaScript Style Sheets (JSS), que permite a voc\u00ea escrever estilos CSS em JavaScript. O JSS tem v\u00e1rias vantagens, inclusive o uso de vari\u00e1veis, express\u00f5es JavaScript e fun\u00e7\u00f5es para criar estilos e temas din\u00e2micos.<\/p>\n<p>Este artigo explora como o JSS funciona, seus benef\u00edcios, e como voc\u00ea pode us\u00e1-lo em seus aplicativos JavaScript. Tamb\u00e9m aborda cria\u00e7\u00e3o de estilos din\u00e2micos, temas e otimiza\u00e7\u00e3o de desempenho. Voc\u00ea pode usar o JSS com muitos tipos de aplicativos, mas neste artigo vamos nos concentrar no JSS para React.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>O que \u00e9 JSS?<\/h2>\n<p>Com o JSS, voc\u00ea pode escrever estilos CSS como objetos JavaScript e usar esses objetos como nomes de classe em elementos ou componentes. O JSS \u00e9 independente de framework, portanto voc\u00ea pode us\u00e1-lo no JavaScript b\u00e1sico ou com frameworks como <a href=\"https:\/\/kinsta.com\/pt\/blog\/javascript-react\/\">React<\/a> e <a href=\"https:\/\/kinsta.com\/pt\/blog\/bibliotecas-de-componentes-angular\/\">Angular<\/a>.<\/p>\n<p>O JSS tem v\u00e1rias vantagens sobre a cria\u00e7\u00e3o de estilos CSS tradicional:<\/p>\n<ul>\n<li><strong>Estilo din\u00e2mico<\/strong>: Com o JSS, voc\u00ea pode manipular estilos com base nas intera\u00e7\u00f5es do usu\u00e1rio ou valores como props ou contexto. As fun\u00e7\u00f5es JavaScript ajudam voc\u00ea a gerar estilos dinamicamente no navegador, dependendo do estado do aplicativo, de dados externos ou das APIs do navegador.<\/li>\n<\/ul>\n<ul>\n<li><strong>Recursos aprimorados de cria\u00e7\u00e3o de temas<\/strong>: Voc\u00ea pode criar estilos espec\u00edficos para um determinado tema usando o JSS. Por exemplo, voc\u00ea pode criar estilos para um tema claro e escuro e, em seguida, aplicar esses estilos espec\u00edficos de tema para todo o aplicativo de acordo com as prefer\u00eancias do usu\u00e1rio. Se voc\u00ea estiver usando o React, o pacote <a href=\"https:\/\/github.com\/cssinjs\/jss\/tree\/master\/packages\/react-jss\" target=\"_blank\" rel=\"noopener noreferrer\">React-JSS<\/a> oferece suporte \u00e0 propaga\u00e7\u00e3o de temas com base em contexto. Voc\u00ea pode definir e gerenciar o tema em um \u00fanico local antes de passar as informa\u00e7\u00f5es do tema para a \u00e1rvore de componentes usando um provedor de temas.<\/li>\n<\/ul>\n<ul>\n<li><strong>Manuten\u00e7\u00e3o aprimorada<\/strong>: Ao definir estilos em objetos JavaScript, voc\u00ea pode agrupar estilos relacionados em um \u00fanico local e import\u00e1-los para o aplicativo quando necess\u00e1rio. Essa abordagem reduz a duplica\u00e7\u00e3o de c\u00f3digo e melhora a organiza\u00e7\u00e3o do c\u00f3digo, facilitando a manuten\u00e7\u00e3o dos estilos ao longo do tempo.<\/li>\n<\/ul>\n<ul>\n<li><strong>CSS real<\/strong>: O JSS gera CSS real em vez de estilos em linha que podem ser confusos e dif\u00edceis de gerenciar. O JSS usa nomes de classe exclusivos por padr\u00e3o, o que ajuda a evitar colis\u00f5es de nomes causadas pela natureza global do CSS.<\/li>\n<\/ul>\n<h2>Como escrever estilos com o JSS<\/h2>\n<p>Este artigo \u00e9 baseado em um projeto React. Ele usa o pacote <code>react-jss<\/code>, que integra o JSS ao React usando a API <code>Hooks<\/code>. O <code>react-jss<\/code> vem com os plugins padr\u00e3o e permite que voc\u00ea use o JSS com o m\u00ednimo de configura\u00e7\u00e3o.<\/p>\n<h3>Sintaxe b\u00e1sica e uso do JSS no React<\/h3>\n<p>Para usar o JSS no React, primeiro voc\u00ea deve instalar o pacote <code>react-jss<\/code> usando um gerenciador de pacotes, como o npm ou o Yarn.<\/p>\n<p>A sintaxe para escrever estilos no JSS envolve a defini\u00e7\u00e3o de regras CSS para elementos espec\u00edficos em um objeto <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>. Por exemplo, o c\u00f3digo a seguir define os estilos para um bot\u00e3o em um aplicativo React.<\/p>\n<pre><code class=\"language-js\">\nconst styles = {\n      button: {\n            padding: \"10px 20px\",\n            background: \"#f7df1e\",\n            textAlign: \"center\",\n            border:\"none\"\n      }\n};<\/code><\/pre>\n<p><strong>Observa\u00e7\u00e3o: <\/strong>As propriedades CSS est\u00e3o em CamelCase.<\/p>\n<p>Para aplicar esses estilos a um elemento HTML:<\/p>\n<ol start=\"1\">\n<li>Gere as classes passando os estilos para a fun\u00e7\u00e3o <code>createUseStyles()<\/code> method from <code>react-jss<\/code>:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">import { createUseStyles } from \"react-jss\";\nconst styles = {\n       button: {\n             padding: \"10px 20px\",\n             background: \"#f7df1e\",\n             textAlign: \"center\",\n             border:\"none\"\n       }\n};\nconst useStyles = createUseStyles(styles);<\/code><\/pre>\n<ol start=\"2\">\n<li>Aplique o CSS ao elemento do bot\u00e3o usando o nome da classe gerada:<\/li>\n<\/ol>\n<pre><code class=\"language-js\">const App = () = &gt; {\n      const classes = useStyles();\n      return (\n            &lt; button className={classes.button} &gt; &lt;\/button &gt;\n      );\n};<\/code><\/pre>\n<p>Esse c\u00f3digo cria um componente React e aplica os estilos no objeto <code>styles<\/code>.<\/p>\n<h3>Como lidar com pseudoclasses, media queries e keyframes<\/h3>\n<p>O JSS \u00e9 compat\u00edvel com todos os recursos CSS existentes, inclusive pseudoclasses, media queries e keyframes. Use a mesma sintaxe das regras de estilo CSS regulares para definir estilos para esses recursos.<\/p>\n<h4>Pseudoclasses<\/h4>\n<p>Por exemplo, suponha que voc\u00ea queira adicionar uma pseudoclasse hover ao bot\u00e3o para alterar a cor do plano de fundo quando o usu\u00e1rio passar o mouse sobre ele. O c\u00f3digo a seguir implementa essa pseudoclasse para que o fundo do bot\u00e3o fique verde-claro quando o mouse passar sobre ele:<\/p>\n<pre><code class=\"language-js\">const styles = {\n      button: {\n            padding: \"10px 20px\",\n            background: \"#f7df1e\",\n            textAlign: \"center\",\n            border:\"none\",\n            '&:hover': {\n                  backgroundColor: 'lightgreen',\n            }\n     }\n};<\/code><\/pre>\n<h4>Keyframes<\/h4>\n<p>Da mesma forma, voc\u00ea pode aplicar uma anima\u00e7\u00e3o keyframe a um componente usando a regra <code>@keyframes<\/code>. Por exemplo, o objeto de estilo abaixo \u00e9 para um componente girat\u00f3rio.<\/p>\n<pre><code class=\"language-js\">const styles = {\n       '@keyframes spin': {\n             '0%': {\n                   transform: 'rotate(0deg)',\n             },\n             '100%': {\n                   transform: 'rotate(360deg)',\n             },\n       },\n       spinner: {\n              width: \"100px\",\n              height: \"100px\",\n              backgroundColor: \"lightgreen\",\n              animation: '$spin 1s linear infinite',\n       },\n}<\/code><\/pre>\n<p>Na fun\u00e7\u00e3o styles, voc\u00ea definiu uma anima\u00e7\u00e3o keyframe denominada <code>spin<\/code> usando a regra <code>@keyframes<\/code>. Em seguida, voc\u00ea cria uma classe chamada <code>spinner<\/code> que aplica a anima\u00e7\u00e3o usando a sintaxe <code>$<\/code> para fazer refer\u00eancia \u00e0 anima\u00e7\u00e3o keyframe.<\/p>\n<h4>Media queries<\/h4>\n<p>As <a href=\"https:\/\/kinsta.com\/pt\/blog\/media-query-javascript\/\">media queries<\/a> tamb\u00e9m usam a sintaxe CSS usual no JSS. Por exemplo, para alterar o tamanho da fonte de um bot\u00e3o em um tamanho de tela espec\u00edfico, use os seguintes estilos:<\/p>\n<pre><code class=\"language-js\">const styles = {\n      button: {\n            fontSize: \"12px\",\n            '@media (max-width: 768px)': {\n                  fontSize: '34px',\n            },\n      }\n};<\/code><\/pre>\n<p>Como voc\u00ea acabou de ver, escrever estilos em JSS n\u00e3o \u00e9 muito diferente de escrever CSS simples. Entretanto, a vantagem \u00e9 que voc\u00ea pode aproveitar o poder do JavaScript para tornar seus estilos din\u00e2micos.<\/p>\n<h2>Estilo din\u00e2mico com JSS<\/h2>\n<p>Estilo din\u00e2mico significa criar estilos que mudam em resposta a condi\u00e7\u00f5es espec\u00edficas. No React, os estilos podem mudar dependendo de valores como estado, props e contexto do componente.<\/p>\n<h3>Como criar estilos din\u00e2micos com o JSS<\/h3>\n<p>No JSS, voc\u00ea pode aplicar condicionalmente estilos aos seus elementos com express\u00f5es JavaScript para criar regras de estilo din\u00e2mico.<\/p>\n<p>Digamos que voc\u00ea tenha um bot\u00e3o que recebe uma propriedade chamada <code>bgColor<\/code>. Seu valor \u00e9 a cor de fundo do bot\u00e3o. Para criar uma regra de estilo que altere a cor de fundo do bot\u00e3o com base na prop, passe as props para o m\u00e9todo <code>useStyles<\/code>.<\/p>\n<pre><code class=\"language-js\">import { createUseStyles } from \"react-jss\"\n\nconst styles = {\n      button: {\n            padding: \"10px 20px\",\n            background: props = &gt;props.bgColor,\n            textAlign: \"center\",\n            border:\"none\"\n      }\n};\nconst Button = ({...props}) =&gt; {\n  \n      const useStyles = createUseStyles(styles);\n      const classes = useStyles({...props});\n      return (\n            &lt;button className={classes.button}&gt;Button &lt;\/button&gt;\n      );\n};<\/code><\/pre>\n<p>Em seguida, voc\u00ea pode fazer refer\u00eancia \u00e0s props no objeto styles. O exemplo acima faz refer\u00eancia a <code>props.bgColor<\/code>.<\/p>\n<p>Voc\u00ea pode passar a cor de fundo que deseja quando o componente renderizar. O componente abaixo renderiza dois componentes <code>Button<\/code> com as cores de fundo <code>lightgreen<\/code> e <code>yellow<\/code>.<\/p>\n<pre><code class=\"language-js\">export default function App() {\n  return (\n    &lt;div &gt;\n      &lt;Button bgColor=\"lightgreen\" \/&gt;\n      &lt;div style={{ marginTop: \"10px\" }}&gt;&lt;\/div&gt;\n      &lt;Button bgColor=\"yellow\" \/&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n<figure style=\"width: 1838px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/image1.png\" alt=\"Two buttons dynamically styled with JSS\" width=\"1838\" height=\"462\"><figcaption class=\"wp-caption-text\">Dois bot\u00f5es com estilos criados dinamicamente com JSS.<\/figcaption><\/figure>\n<p>Sempre que renderizar o componente <code>Button<\/code>, voc\u00ea poder\u00e1 definir o estilo do plano de fundo como quiser.<\/p>\n<p>Voc\u00ea tamb\u00e9m pode alterar os estilos com base no estado de um componente. Suponha que voc\u00ea tenha um menu de navega\u00e7\u00e3o com v\u00e1rios itens de link. Para destacar o link da p\u00e1gina atual, defina um valor de estado chamado <code>isActive<\/code> que controla se um item de link do menu est\u00e1 ativo.<\/p>\n<p>Em seguida, voc\u00ea pode usar um operador tern\u00e1rio JavaScript para verificar o valor de <code>isActive<\/code>, definindo a cor do link como azul se o estado for <code>true<\/code> e vermelho se for <code>false<\/code>.<\/p>\n<pre><code class=\"language-js\">const styles = {\n      a: {\n             color: ({ isActive }) =&gt; isActive ? 'blue' : 'red',\n             padding: '10px',\n      },\n};<\/code><\/pre>\n<p>Agora os links ativos ficam azuis e os inativos ficam vermelhos.<\/p>\n<p>Da mesma forma, voc\u00ea pode criar um estilo din\u00e2mico com base no contexto. Voc\u00ea pode atribuir um estilo a um elemento, como <code>UserContext<\/code>, com base no valor de um contexto que armazena o status on-line do usu\u00e1rio.<\/p>\n<pre><code class=\"language-js\">const { online } = useContext(UserContext);\nconst styles = {\n      status: {\n            background: online ? 'lightgreen' : '',\n            width: '20px',\n            height: '20px',\n            borderRadius: \"50%\",\n            display: online ? 'flex' : 'hidden'\n      },\n};<\/code><\/pre>\n<p>Neste exemplo, o elemento tem um fundo verde se o usu\u00e1rio estiver on-line. Voc\u00ea define a propriedade <code>display<\/code> como <code>flex<\/code> se o usu\u00e1rio estiver on-line e <code>hidden<\/code> se o usu\u00e1rio estiver off-line.<\/p>\n<h3>Casos de uso de estilo din\u00e2mico<\/h3>\n<p>O estilo din\u00e2mico \u00e9 um recurso avan\u00e7ado do JSS que tem muitos usos:<\/p>\n<ul>\n<li><strong>Temas<\/strong>: Voc\u00ea pode definir estilos com base em um objeto de tema, como um tema claro e um tema escuro, e pass\u00e1-lo para os componentes como um valor de prop ou de contexto.<\/li>\n<li><strong>Renderiza\u00e7\u00e3o condicional<\/strong>: O JSS permite que voc\u00ea defina estilos com base em valores espec\u00edficos. Voc\u00ea pode criar estilos que se aplicam somente sob determinadas condi\u00e7\u00f5es, como quando um bot\u00e3o est\u00e1 desativado, um campo de texto est\u00e1 em estado de erro, um menu de navega\u00e7\u00e3o lateral est\u00e1 aberto ou quando um usu\u00e1rio est\u00e1 on-line.<\/li>\n<li><strong>Design responsivo<\/strong>: Voc\u00ea pode usar o estilo din\u00e2mico no JSS para alterar o estilo de um elemento com base na largura da janela de visualiza\u00e7\u00e3o. Por exemplo, voc\u00ea pode definir um conjunto de estilos para um breakpoint espec\u00edfico usando media queries e aplic\u00e1-los condicionalmente com base no tamanho da tela.<\/li>\n<\/ul>\n<h2>Como usar temas com o JSS<\/h2>\n<p>Use temas para fornecer uma interface de usu\u00e1rio consistente em todo o seu aplicativo. \u00c9 f\u00e1cil criar temas no JSS \u2014 basta definir um objeto de tema com valores de estilo globais, como cores, tipografia e espa\u00e7amento. Por exemplo:<\/p>\n<pre><code class=\"language-js\">const theme = {\n      colors: {\n            primary: '#007bff',\n            secondary: '#6c757d',\n            light: '#f8f9fa',\n            dark: '#343a40',\n       },\n       typography: {\n             fontFamily: 'Helvetica, Arial, sans-serif',\n             fontSize: '16px',\n             fontWeight: 'normal',\n       },\n       spacing: {\n             small: '16px',\n             medium: '24px',\n             large: '32px',\n       },\n};<\/code><\/pre>\n<p>Para aplicar temas aos seus componentes, use provedores de contexto. A biblioteca JSS fornece um componente <code>ThemeProvider<\/code> que voc\u00ea pode usar para encapsular componentes que precisam acessar o tema.<\/p>\n<p>O exemplo a seguir envolve o componente <code>Button<\/code> com o componente <code>ThemeProvider<\/code> e passa o objeto <code>theme<\/code> como uma propriedade.<\/p>\n<pre><code class=\"language-js\">import { ThemeProvider } from \"react-jss\";\nconst App = () =&gt; (\n      &lt;ThemeProvider theme={theme}&gt;\n            &lt;Button \/&gt;\n      &lt;\/ThemeProvider&gt;\n)<\/code><\/pre>\n<p>Voc\u00ea pode acessar o tema no componente <code>Button<\/code> usando um hook <code>useTheme()<\/code> e pass\u00e1-lo para o objeto <code>useStyles<\/code>. O exemplo abaixo usa os estilos definidos no objeto de tema para criar um bot\u00e3o prim\u00e1rio.<\/p>\n<pre><code class=\"language-js\">import { useTheme } from \u201creact-jss\u201d\n\nconst useStyles = createUseStyles({\n  primaryButton: {\n    background: ({ theme }) =&gt; theme.colors.primary,\n    font: ({ theme }) =&gt; theme.typography.fontFamily,\n    fontSize: ({ theme }) =&gt; theme.typography.fontSize,\n    padding: ({ theme }) =&gt; theme.spacing.medium\n  }\n});\n\nconst Button = () =&gt; {\n      const theme = useTheme()\n      const classes = useStyles({theme})\n      return (\n            &lt;div&gt;\n              &lt;button className={classes.primaryButton}&gt; Primary Button &lt;\/button&gt;\n            &lt;\/div&gt;\n\n      )\n}<\/code><\/pre>\n<p>O bot\u00e3o deve ficar parecido com a imagem abaixo, com texto preto em um bot\u00e3o retangular azul.<\/p>\n<figure style=\"width: 1823px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/image3.png\" alt=\"A primary button style based on the theme.\" width=\"1823\" height=\"194\"><figcaption class=\"wp-caption-text\">Um estilo de bot\u00e3o prim\u00e1rio baseado no tema.<\/figcaption><\/figure>\n<p>Se voc\u00ea alterasse qualquer um dos valores no objeto de tema, isso acionaria automaticamente novos estilos a serem aplicados a todos os componentes agrupados com o componente <code>ThemeProvider<\/code>. Se voc\u00ea alterar o valor da cor prim\u00e1ria para <code>lightgreen<\/code>, a cor do bot\u00e3o tamb\u00e9m mudar\u00e1 para verde-claro, como na imagem abaixo.<\/p>\n<figure style=\"width: 1744px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/10\/image2.png\" alt=\"A primary button color adapts to the theme.\" width=\"1744\" height=\"191\"><figcaption class=\"wp-caption-text\">A cor prim\u00e1ria de um bot\u00e3o se adapta ao tema.<\/figcaption><\/figure>\n<p>Aqui est\u00e3o algumas diretrizes a serem seguidas ao criar temas:<\/p>\n<ul>\n<li>Defina o objeto de tema em um arquivo separado para manter o c\u00f3digo organizado e de f\u00e1cil manuten\u00e7\u00e3o.<\/li>\n<li>Use nomes descritivos para os valores de estilo para tornar o objeto de tema f\u00e1cil de ler e atualizar.<\/li>\n<li>Use vari\u00e1veis CSS para definir valores que voc\u00ea usa com frequ\u00eancia em seu CSS.<\/li>\n<li>Crie valores padr\u00e3o para todas as propriedades de estilo para manter um design consistente em todo o aplicativo.<\/li>\n<li>Teste minuciosamente seus temas para garantir que eles funcionem como planejado em todos os dispositivos e navegadores.<\/li>\n<\/ul>\n<p>Seguindo essas pr\u00e1ticas recomendadas, voc\u00ea criar\u00e1 um tema que \u00e9 simples de usar e f\u00e1cil de atualizar \u00e0 medida que o aplicativo cresce.<\/p>\n<h2>Desempenho e otimiza\u00e7\u00e3o<\/h2>\n<p>O JSS \u00e9 uma solu\u00e7\u00e3o de estilo de alto desempenho. Com o JSS, somente os estilos usados atualmente na tela s\u00e3o adicionados ao DOM (Document Object Model), o que reduz o tamanho do DOM e acelera a renderiza\u00e7\u00e3o. O JSS tamb\u00e9m armazena em cache os estilos renderizados, o que significa que o JSS compila CSS apenas uma vez, melhorando ainda mais o desempenho.<\/p>\n<p>Voc\u00ea pode tirar proveito de otimiza\u00e7\u00f5es adicionais de desempenho usando o pacote <a href=\"https:\/\/github.com\/cssinjs\/jss\/tree\/master\/packages\/react-jss\" target=\"_blank\" rel=\"noopener noreferrer\"><code>react-jss<\/code><\/a> em vez do pacote principal do <a href=\"https:\/\/github.com\/cssinjs\"><code>JSS<\/code><\/a>. Por exemplo, o <code>react-jss<\/code> remove as folhas de estilo quando o componente \u00e9 desmontado. Tamb\u00e9m lida com a extra\u00e7\u00e3o cr\u00edtica de CSS e extrai apenas estilos de componentes renderizados. \u00c9 assim que o pacote <code>react-jss<\/code> reduz o tamanho do pacote de CSS e melhora o tempo de carregamento.<\/p>\n<p>Para reduzir ainda mais o tamanho do pacote de CSS, use divis\u00e3o de c\u00f3digo para carregar somente o CSS de que uma p\u00e1gina ou componente espec\u00edfico precisa. Uma biblioteca como <code>loadable-components<\/code> pode simplificar a divis\u00e3o de c\u00f3digo.<\/p>\n<p>O JSS tamb\u00e9m permite que voc\u00ea gere CSS no lado do servidor. Voc\u00ea pode agregar e encadear o CSS anexado usando a classe de registro <code>StyleSheet<\/code> do JSS e, em seguida, enviar os componentes renderizados e a string CSS para o cliente. Ap\u00f3s iniciar o aplicativo, o CSS est\u00e1tico n\u00e3o \u00e9 mais necess\u00e1rio e voc\u00ea pode remov\u00ea-lo, reduzindo o tamanho do pacote.<\/p>\n<h2>Resumo<\/h2>\n<p>Voc\u00ea aprendeu os conceitos b\u00e1sicos da sintaxe do JSS, como criar e aplicar objetos de estilo a componentes, e como criar estilos din\u00e2micos. Agora voc\u00ea tamb\u00e9m sabe como usar o componente <code>ThemeProvider<\/code> para aplicar temas e melhorar o desempenho no JSS. E pode usar o JSS para criar estilos reutiliz\u00e1veis, din\u00e2micos e de f\u00e1cil manuten\u00e7\u00e3o, que se adaptam a v\u00e1rias condi\u00e7\u00f5es.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Estilos permitem definir a apar\u00eancia do seu site e criar uma marca coesa e est\u00e9tica. Embora v\u00e1rias abordagens usem CSS (Cascading Style Sheets) para criar estilos &#8230;<\/p>\n","protected":false},"author":290,"featured_media":64052,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1002,978],"class_list":["post-64051","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react","topic-tutoriais-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Crie o Estilo do seu Site React com JSS - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Explore como o JSS funciona, seus benef\u00edcios, como criar estilos em seu site React com o JSS, e como us\u00e1-lo em seus aplicativos JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/pt\/blog\/jss\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crie o Estilo do seu Site React com JSS\" \/>\n<meta property=\"og:description\" content=\"Explore como o JSS funciona, seus benef\u00edcios, como criar estilos em seu site React com o JSS, e como us\u00e1-lo em seus aplicativos JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/jss\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-16T18:36:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T20:01:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/jss.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marcia Ramos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Explore como o JSS funciona, seus benef\u00edcios, como criar estilos em seu site React com o JSS, e como us\u00e1-lo em seus aplicativos JavaScript.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/jss.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marcia Ramos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jss\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jss\/\"},\"author\":{\"name\":\"Marcia Ramos\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\"},\"headline\":\"Crie o Estilo do seu Site React com JSS\",\"datePublished\":\"2023-10-16T18:36:40+00:00\",\"dateModified\":\"2025-10-01T20:01:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jss\/\"},\"wordCount\":2077,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jss\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/jss.jpg\",\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/jss\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jss\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/jss\/\",\"name\":\"Crie o Estilo do seu Site React com JSS - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jss\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jss\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/jss.jpg\",\"datePublished\":\"2023-10-16T18:36:40+00:00\",\"dateModified\":\"2025-10-01T20:01:03+00:00\",\"description\":\"Explore como o JSS funciona, seus benef\u00edcios, como criar estilos em seu site React com o JSS, e como us\u00e1-lo em seus aplicativos JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jss\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/jss\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jss\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/jss.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/jss.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/jss\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Crie o Estilo do seu Site React com JSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116\",\"name\":\"Marcia Ramos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g\",\"caption\":\"Marcia Ramos\"},\"description\":\"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/marciadiasramos\/\"],\"honorificSuffix\":\"B.Sc.\",\"gender\":\"Female\",\"knowsLanguage\":[\"English\",\"Portuguese\"],\"jobTitle\":\"Editorial Team Lead\",\"worksFor\":\"Kinsta Inc.\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/author\/marciaramos\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Crie o Estilo do seu Site React com JSS - Kinsta\u00ae","description":"Explore como o JSS funciona, seus benef\u00edcios, como criar estilos em seu site React com o JSS, e como us\u00e1-lo em seus aplicativos JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/pt\/blog\/jss\/","og_locale":"pt_PT","og_type":"article","og_title":"Crie o Estilo do seu Site React com JSS","og_description":"Explore como o JSS funciona, seus benef\u00edcios, como criar estilos em seu site React com o JSS, e como us\u00e1-lo em seus aplicativos JavaScript.","og_url":"https:\/\/kinsta.com\/pt\/blog\/jss\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2023-10-16T18:36:40+00:00","article_modified_time":"2025-10-01T20:01:03+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/jss.jpg","type":"image\/jpeg"}],"author":"Marcia Ramos","twitter_card":"summary_large_image","twitter_description":"Explore como o JSS funciona, seus benef\u00edcios, como criar estilos em seu site React com o JSS, e como us\u00e1-lo em seus aplicativos JavaScript.","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/jss.jpg","twitter_creator":"@kinsta_pt","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Marcia Ramos","Tempo estimado de leitura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/jss\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/jss\/"},"author":{"name":"Marcia Ramos","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116"},"headline":"Crie o Estilo do seu Site React com JSS","datePublished":"2023-10-16T18:36:40+00:00","dateModified":"2025-10-01T20:01:03+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/jss\/"},"wordCount":2077,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/jss\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/jss.jpg","inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/pt\/blog\/jss\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/jss\/","url":"https:\/\/kinsta.com\/pt\/blog\/jss\/","name":"Crie o Estilo do seu Site React com JSS - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/jss\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/jss\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/jss.jpg","datePublished":"2023-10-16T18:36:40+00:00","dateModified":"2025-10-01T20:01:03+00:00","description":"Explore como o JSS funciona, seus benef\u00edcios, como criar estilos em seu site React com o JSS, e como us\u00e1-lo em seus aplicativos JavaScript.","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/jss\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/jss\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/jss\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/jss.jpg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/10\/jss.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/jss\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/pt\/topicos\/react\/"},{"@type":"ListItem","position":3,"name":"Crie o Estilo do seu Site React com JSS"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/72bff0015d3fb3ba3d8a85494dc0b116","name":"Marcia Ramos","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0d680db24858fdf61a7e7ce3c1a160f5?s=96&d=mm&r=g","caption":"Marcia Ramos"},"description":"I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 10 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.","sameAs":["https:\/\/www.linkedin.com\/in\/marciadiasramos\/"],"honorificSuffix":"B.Sc.","gender":"Female","knowsLanguage":["English","Portuguese"],"jobTitle":"Editorial Team Lead","worksFor":"Kinsta Inc.","url":"https:\/\/kinsta.com\/pt\/blog\/author\/marciaramos\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/64051","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/290"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=64051"}],"version-history":[{"count":9,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/64051\/revisions"}],"predecessor-version":[{"id":64276,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/64051\/revisions\/64276"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64051\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64051\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64051\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64051\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64051\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64051\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64051\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/64051\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/64052"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=64051"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=64051"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=64051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}