Añadir un tema en React para cambiar los colores de elementos y fuente de texto

Tiempo de lectura: < 1 minuto

Hola, hoy vamos a aprender a añadir un Theme para personalizar los colores que se muestran en el tema de nuestra web en React.

Para este tutorial vamos a utilizar Material UI

Primero instalamos las dependencias necesarias:

npm install @mui/material @emotion/react @emotion/styled

Ahora vamos a crear nuestro tema, creamos un archivo llamado theme.tsx (uso TypeScript, puedes crearlo en JavasScript)

// theme.ts
import { createTheme, Theme } from '@mui/material/styles';
import { teal } from '@mui/material/colors';

const theme: Theme = createTheme({
  palette: {
    primary: teal,
  },
  typography: {
    fontFamily: 'Roboto, sans-serif',
  },
});

export default theme;

En mi caso he establecido Roboto como fontFamily y los colores en Verde Turquesa (Teal)

Ahora tenemos que establecer nuestro tema en nuestro fichero principal, en mi caso main.tsx

// index.tsx o App.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from '@mui/material/styles';
import theme from './theme';

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Y ya tenemos aplicado y listo nuestro tema.