Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

176
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda