GabaritoB — Implementar ThemeProvider com contexto React
Gabarito: letra B. Em uma aplicação que utiliza CSS-in-JS com styled-components, a abordagem mais adequada para implementar temas dinâmicos é o ThemeProvider com contexto React, pois ele permite que os valores do tema sejam acessados por todos os componentes estilizados de forma reativa e centralizada, propagando mudanças de tema automaticamente pela árvore de componentes. As demais alternativas (variáveis CSS globais, estilos inline, múltiplos arquivos CSS e classes diretamente no JSX) não aproveitam o mecanismo de contexto e a integração nativa que o styled-components oferece para temas dinâmicos.
O styled-components é uma biblioteca de CSS-in-JS que permite escrever estilos dentro de componentes JavaScript, gerando classes CSS automaticamente. Para temas dinâmicos, a biblioteca fornece o componente ThemeProvider, que utiliza o Context API do React para disponibilizar um objeto de tema para todos os componentes estilizados que estiverem dentro dele. Quando o valor do tema muda (por exemplo, ao alternar entre modo claro e escuro), o ThemeProvider re-renderiza os componentes consumidores, e os estilos são recalculados com os novos valores. Essa é a abordagem recomendada pela documentação oficial do styled-components, pois é reativa, evita prop drilling e mantém a lógica de tema centralizada.
Na prática, o fluxo é: define-se um objeto com as cores, espaçamentos e tipografia do tema; envolve-se a aplicação (ou parte dela) com o ThemeProvider passando esse objeto; nos componentes estilizados, acessa-se as propriedades do tema através da função props => props.theme.corPrimaria. Para alternar o tema, basta mudar o objeto passado ao ThemeProvider, e todos os componentes que dependem dele são atualizados automaticamente. Essa abordagem é superior às alternativas porque integra o tema ao ciclo de vida do React, permitindo que mudanças de estado (como um botão de alternância) reflitam imediatamente nos estilos.
A pegadinha desta questão está em confundir a abordagem específica do styled-components com técnicas genéricas de CSS. Variáveis CSS globais (alternativa A) são uma solução válida para temas, mas não são a abordagem "mais adequada" quando se usa styled-components, pois não aproveitam o contexto React e a reatividade integrada. Estilos inline (alternativa C) são inadequados para temas dinâmicos porque não suportam pseudo-classes, media queries e são difíceis de manter. Múltiplos arquivos CSS (alternativa D) e classes diretamente no JSX (alternativa E) são abordagens tradicionais que não oferecem a mesma integração com o estado do React.
Guarde a distinção central: quando a pergunta menciona explicitamente "styled-components" e "temas dinâmicos", a resposta esperada é o mecanismo que a própria biblioteca oferece para esse fim — o ThemeProvider com contexto React. As outras opções são técnicas de CSS que existem, mas não são a forma idiomática de resolver o problema dentro do ecossistema styled-components.
Variáveis CSS globais (definidas em :root ou html) são uma técnica válida para temas, mas não são a abordagem mais adequada quando se usa styled-components. Elas não aproveitam o Context API do React nem a reatividade integrada do styled-components. Embora seja possível combiná-las com styled-components, a documentação oficial recomenda o ThemeProvider como a forma nativa de lidar com temas dinâmicos nessa biblioteca.
O ThemeProvider com contexto React é a abordagem oficial e mais adequada para temas dinâmicos com styled-components. Ele utiliza o Context API para propagar o objeto de tema para todos os componentes estilizados, permitindo que mudanças no tema sejam refletidas automaticamente em toda a árvore de componentes. Essa é a solução que integra o tema ao ciclo de vida do React, tornando a alternância de temas (claro/escuro, por exemplo) reativa e centralizada.
Definir estilos inline (atributo style no JSX) é inadequado para temas dinâmicos. Estilos inline não suportam pseudo-classes (:hover), media queries e são difíceis de manter e escalar. Além disso, não há um mecanismo nativo de propagação de tema — cada componente precisaria receber as cores via props, o que gera prop drilling e código repetitivo. Não é a abordagem recomendada para temas dinâmicos com styled-components.
Criar múltiplos arquivos CSS (um para cada tema) é uma abordagem tradicional, mas não é a mais adequada para temas dinâmicos com styled-components. Ela exige carregar/descarregar arquivos CSS manualmente, não aproveita a reatividade do React e dificulta a manutenção. O styled-components foi criado justamente para eliminar a necessidade de arquivos CSS separados, integrando os estilos ao JavaScript.
Aplicar classes CSS diretamente no JSX (por exemplo, className={tema === 'escuro' ? 'dark' : 'light'}) é uma técnica possível, mas não é a abordagem mais adequada para temas dinâmicos com styled-components. Ela depende de CSS global ou módulos CSS, não aproveita o mecanismo de contexto do React nem a integração nativa do styled-components. O ThemeProvider oferece uma solução mais limpa e reativa, sem a necessidade de gerenciar classes manualmente.
A banca explora a confusão entre técnicas genéricas de CSS (variáveis globais, arquivos CSS) e o mecanismo específico do styled-components. Quando a questão menciona "styled-components" e "temas dinâmicos", a resposta esperada é o ThemeProvider com contexto React — não uma técnica de CSS tradicional. Fique atento ao contexto da pergunta: se ela fala de CSS-in-JS, a solução idiomática é a que integra o tema ao React.
Para questões sobre styled-components, lembre-se do fluxo: ThemeProvider → objeto de tema → acesso via props.theme nos componentes estilizados. Se a alternativa menciona "contexto React" ou "ThemeProvider", é quase sempre a correta quando o assunto é tema dinâmico. Compare com variáveis CSS globais: elas são úteis, mas não são a abordagem nativa do styled-components.
Gabarito: letra B
Link permanente: /questoes/qg425162