Crear themes con MUI

Hola a todos, una cosa que me quedó volando en el curso es la creación de Themes en Mui. Que es un Theme? Bueno, básicamente son estilos generales que se aplican a varios componentes. Si bien es útil ocupar la prop sx, esta termina siendo muy redundante cuando quieres aplicar el mismo estilo a dos o tres o diez componentes. No sería mejor ocupar un estilo más general como las clases de CSS?

Para hacer esto hay que modificar el theme por default que existe en la libreria MUI. Los componentes de MUI tienen un estilo por defecto, que los caracteriza (ese estilo bien google que tienen), pero tú puedes modificarlo y aplicarlo a una serie de componentes de React.

Para hacer ello es necesario que uses una etiqueta (wraper) que envuelva todos los componentes que quieres participen de este nuevo theme customizado. Esta etiqueta es <themeprovider>, luego debes pasar en esta etiqueta wraper la prop theme. Yo lo he hecho así en mi archivo app.jsx:</themeprovider>

import'./App.css';
import { Container, Stack, Button, Typography } from'@mui/material';
import Paper from'@mui/material/Paper';
import Grid2 from'@mui/material/Unstable_Grid2';
import { CssBaseline, ThemeProvider } from"@mui/material";
import appTheme from'./themes/theme';

functionApp() {

  return (
    <divclassName="App">
      <ThemeProvidertheme={appTheme}>
      <CssBaselineenableColorScheme />
        <ContainermaxWidth="sm">
          <Grid2containerspacing={2}>
            <Grid2xs={6}>
                <Paperelevation={5}>
                  <Typographyvariant='h1'>hola funcionaTypography>
                  <Typographyvariant='subtitle1'>hola funciona 2Typography>
                  5 
                Paper>
            Grid2>
            <Grid2xs={6}>
              <Paperelevation={3}>
                  3 
                  <Buttoncolor="info"variant="contained">
                    Primary
                  Button>
                  <Buttoncolor="common"variant="contained">
                    Secondary
                  Button>
              Paper>
            Grid2>
            <Grid2xs={6}>
                <Stackdirection="row"spacing={2}divider={elevation={3}>
                      3 
                  Paper>}>
                    <Paperelevation={3}>
                      3 
                  Paper>
                  <Paperelevation={3}>
                      3 
                  Paper>
                  <Paperelevation={3}>
                      3 
                  Paper>
                Stack>
            Grid2>
            <Grid2xs={6}>
              <Paperelevation={1}>
                  1 
              Paper>
            Grid2>
          Grid2>
        Container>
      ThemeProvider>
    div>
  );
}

export default App;

Verás que el valor que paso en la prop theme es una constante de otro archivo, el siguiente:

import { pink, yellow } from "@mui/material/colors";import { createTheme } from "@mui/material/styles";const appTheme = createTheme({
  palette: {
    primary: yellow,
    secondary: pink,
  },
  typography:{
    h1: {
        fontSize: '2rem',
        color: 'peru'
    },
    subtitle1: {
       fontWeight: '900',
       fontSize: '5rem',
       color: 'gold'
    }
  }
});

exportdefault appTheme;

Esta constante es una alteración del objeto que MUI tiene por defecto para determinar el estilo; puedes ver este objeto acá en su documentación (https://mui.com/material-ui/customization/default-theme/). En principio no es tan simple, pues este objeto distribuye los estilos de una forma un poco extraña. En lo que me he enfocado es en los colores de los componentes y los colores del texto de ellos. Para ello, he modificado solo la key pallete y typography. LA primera se refiere a los colores, la segunda al texto.

Dentro de pallete, hay varios estilos por defecto. Pues al igual que bootstrap, hay un estilo primario, otro secundario, otro de peligro, otro de warning etc. Ahí debes poner cual de estos querras modificar. yo modifiqué el color del estilo primario y secundario.

En typography, en cambio se divide el tipo de texto por encabezados o sección de la página, así como h1, h2, h3, body1, subtitle. Debes poner qué clase quieres modificar. yo modifiqué h1 (por ejemplo), cambiando el color y el tamaño de fuente.

Siempre ten en cuenta que en las etiquetas jsx debes poner el atributo variant y señalar si es h1 o subtitle u otra cosa.

Espero te sirva esto para aprender un poco más en profundidad. Saludos!