Estilos Dinámicos con Theme Provider y Style Components

¿Cómo podemos implementar estilos globales y dinámicos con Styled Components?

Para asegurarnos de que nuestras aplicaciones no solo tengan un diseño integrado, sino también un aspecto único y dinámico, podemos usar Styled Components. Esto nos permite combinar CSS directamente con nuestros componentes React. En esta sección, aprenderás a implementar estilos globales que cambian dinámicamente al interactuar con elementos, como cuando pasas el mouse sobre una película.

¿Cómo crear estilos globales?

Primero, debemos crear un componente para nuestros estilos globales. Esto se consigue con la función CreateGlobalStyle de Styled Components.

// GlobalStyle.js
import { createGlobalStyle } from 'styled-components';

export const GlobalStyle = createGlobalStyle`
  html, body {
    background-color: ${(props) => props.theme.bg};
  }
`;

Dentro del archivo GlobalStyle.js, definimos que tanto el html como el body tendrán un color de fondo que se determinará por las propiedades del tema.

¿Cómo integrar este estilo global en nuestra aplicación?

Luego de definir nuestros estilos globales, debemos integrarlos dentro de nuestro Theme Provider, asegurándonos de que todos los componentes puedan manejar estas propiedades.

import { ThemeProvider } from 'styled-components';
import { GlobalStyle } from './GlobalStyle';

const App = () => {
  return (
    <ThemeProvider theme={selectedTheme}>
      <GlobalStyle />
      {/* Otros componentes */}
    </ThemeProvider>
  );
};

Aquí utilizamos ThemeProvider para pasar propiedades de tema a lo largo de nuestra aplicación, donde selectedTheme es la selección del tema actual.

¿Cómo hacer dinámico el cambio de temas?

La clave para un sitio web interactivo radica en permitir que los usuarios vean cambios visuales según su interacción. En nuestro caso, queremos que el tema cambie al pasar el mouse por una película específica.

Uso de React State para gestionar temas

Primero, manejamos el estado del tema usando el hook useState de React.

import React, { useState } from 'react';

const [theme, setTheme] = useState('Avengers');

// Paso el estado directamente al ThemeProvider
<ThemeProvider theme={themes[theme]}></ThemeProvider>

Aquí, themes contiene las definiciones de estilo asociadas con cada película.

Actualizar el tema al interactuar con el componente

Cuando pasamos el mouse sobre una película, actualizamos el tema llamando a setTheme.

const MovieComponent = ({ movieName, updateTheme }) => {
  return (
    <StyledComponent onMouseEnter={() => updateTheme(movieName)}>
      {/* Renderizar información de película */}
    </StyledComponent>
  );
};

// Llama a cada componente con la función para actualizar tema
<MovieComponent updateTheme={setTheme} movieName="Terminator" />

La función onMouseEnter utiliza updateTheme para cambiar el tema actual dependiendo del nombre de la película.

¿Cómo solucionar problemas comunes?

¿Qué ocurre si nada cambia al pasar el mouse por una película? Hay varios elementos a revisar:

1. Comprobación de funciones y parámetros: Asegúrate de que las funciones están correctamente referenciadas con onMouseEnter={() => updateTheme(movieName)}.
2. Verificación del estado inicial: Confirmar que el tema inicial (por ejemplo, "Avengers") está correctamente vinculado en useState.

Desafíos y formas de extender tu aprendizaje

Ahora que lo básico está implementado, invita a la creatividad en tu aplicación. Añade más películas, integra distintos colores o temas, o experimenta con animaciones para transiciones más atractivas.

Recuerda, la práctica hace maestro. Juega con estas configuraciones y diviértete mientras aprendes, ¡y no olvides compartir tus nuevas creaciones en los comentarios! Si te sientes valiente, en la siguiente clase exploraremos más acerca de CSS en JS con Svelte y el uso de otra herramienta popular, Emotion. ¡Te espero ahí!