Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

173
Vistas
using theme.spacing inside theme definition

I have the following theme setup:

export const themeDefault = createTheme({
  themeName: 'Default (Mortgage Hub)',
  spacing: 4,
  ...typography,
  palette,
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          paddingLeft: theme.spacing(12),
          paddingRight: theme.spacing(4),
          border: '10px',
        },
      },
    },
  },
})

And I would like to use theme.spacing inside however, of course. Theme is not defined yet. I have tried to use makeStyles & useTheme however these are hooks. So of course they will not work.

Are you able to supply styleOverrides once the theme has been indicated?

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

The styleOverrides feature of the theme is extremely powerful and versatile. In the Overrides based on props portion of the documentation, you can find an example of specifying a callback within the styleOverrides which then gives you access to the component's props and state (via ownerState) and the theme.

Below is an example showing how the callback syntax gives you access to the theme as well as showing how you can leverage ownerState to do conditional styles based on the props passed to a component (e.g. based on whether or not startIcon was specified or which variant was used or any combination of interest).

import * as React from "react";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import SaveIcon from "@mui/icons-material/Save";

const theme = createTheme({
  themeName: "Default (Mortgage Hub)",
  spacing: 4,
  components: {
    MuiButton: {
      styleOverrides: {
        root: ({ ownerState, theme }) => {
          const conditionalStyles = {};
          if (ownerState.startIcon !== undefined) {
            conditionalStyles.paddingLeft = theme.spacing(6);
            if (ownerState.variant === "outlined") {
              conditionalStyles.border = "5px solid black";
              conditionalStyles["&:hover"] = { border: "5px solid grey" };
            }
          } else {
            conditionalStyles.paddingLeft = theme.spacing(4);
          }
          return {
            ...conditionalStyles,
            paddingRight: theme.spacing(4)
          };
        }
      }
    }
  }
});
export default function BasicButtons() {
  return (
    <ThemeProvider theme={theme}>
      <Stack spacing={2} direction="row">
        <Button variant="text">Text</Button>
        <Button variant="contained">Contained</Button>
        <Button variant="outlined">Outlined</Button>
        <Button startIcon={<SaveIcon />} variant="contained">
          Contained with startIcon
        </Button>
        <Button startIcon={<SaveIcon />} variant="outlined">
          Outlined with startIcon
        </Button>
      </Stack>
    </ThemeProvider>
  );
}

Edit BasicButtons Material Demo (forked)

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda