Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

167
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!