0

I am trying to style buttons in a custom MUI theme however, when I try to incorporate components into my code I get the following error:

Error that pops up in VS when I inspect the error in the code

This is strange to me because I am directly following the documentation here but still getting this error.

  1. I can't tell what I might be doing wrong below is the code I am currently working with, did I forget to import something?
import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      light: '#6826FB',
      main: '#6826FB',
      dark: '#CDBDFF',
    },
    secondary: {
      light: '#625883',
      main: '#615B71',
      dark: '#CCC0F1',
      contrastText: '#ffcc00', //not sure 
    },
    contrastThreshold: 3,
    tonalOffset: 0.2,
  },

  
  typography: {
    subtitle1: {
      fontSize: 12,
    },
    body1: {
      fontWeight: 500,
    },
    button: {
      fontFamily: 'Roboto',
      fontSize: '12px',
      fontStyle: 'SemiBold',
    },
  },
  
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          fontSize: '0.75',
          background: '#5B00EF',
          borderRadius: '4px',
        },
      },
    },
  });
  1. Is this the best way to do this? I found another way to apply styling to components in the code base which I can refer to below but it believe it might be deprecated? What is the difference between Overides and StyleOverides?
const theme = createTheme({
  palette: {
    primary: {
      light: "rgb(234, 227, 243)",
      main: "#5B00EF",
    },
    secondary: {
      main: "#1C1B1F",
    },
  },
  overrides: {
    MuiButton: {
      root: {
        textTransform: "capitalize",
        fontSize: 12,
        lineHeight: "14px",
        fontWeight: 600,
      },
    },   
  },
});

I tried changing styleOverides (even though this is what the documentation in react suggests) and tried to instead use overrides and this removed the issue but I feel as though I am confused why the documentation suggests one way versus the other unless this way is deprecated? Is the documentation not up to date?

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
Lauren
  • 9
  • 1

0 Answers0