CODEWITHSUNDEEP
reactjsmaterial-ui
Fernando Maymone
Fernando Maymone

Reputation: 755

Why Material-UI is not overriding styles?

Im using Material-UI within my application. The typography and palletes overriding is working perfectly. But when I try to overrides the MUIButton, nothing happens. This is my Style file: 

const theme = createMuiTheme(SculpStyle);

export const SculpStyle = {
  typography: {
    fontFamily: ["Circular", "Open Sans", "Arial", "sans-serif"].join(","),
    //fontSize: 20
    //    htmlFontSize: 12,
  },

  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: "#50be9c"
      // dark: will be calculated from palette.primary.main,
      // contrastText: will be calculated to contrast with palette.primary.main
    },
    secondary: {
      light: "#1e8fb2",
      main: "#ee4d73",
      // dark: will be calculated from palette.secondary.main,
      contrastText: "#ffcc00"
    },

    //   contrastThreshold: 3,

    //   tonalOffset: 0.2
    overrides: {
      MuiButton: {
        root: {
          fontWeight: "bold",
          backgroundColor: "red",
          margin: "10px",
          "&:hover": {
            backgroundColor: "green"
          }
        }
      }
    }
  }
};

Im following exactly the Material-UI API, but the Button is never overrided. What Im doing wrong here?

Upvotes: 0

Views: 506

Answers (1)

Ramiz Wachtler
Ramiz Wachtler

Reputation: 5683

It looks like you defined your overrides on the wrong level, in your code those are nested within palette, but according to the documentation, the overrides for a specific component should be present on the "root" level of the configuration object (See here).

const theme = createMuiTheme(SculpStyle);

export const SculpStyle = {
  typography: {
    fontFamily: ["Circular", "Open Sans", "Arial", "sans-serif"].join(","),
    //fontSize: 20
    //    htmlFontSize: 12,
  },

  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: "#50be9c"
      // dark: will be calculated from palette.primary.main,
      // contrastText: will be calculated to contrast with palette.primary.main
    },
    secondary: {
      light: "#1e8fb2",
      main: "#ee4d73",
      // dark: will be calculated from palette.secondary.main,
      contrastText: "#ffcc00"
    },

    //   contrastThreshold: 3,

    //   tonalOffset: 0.2
  },
  overrides: {
    MuiButton: {
      root: {
        fontWeight: "bold",
        backgroundColor: "red",
        margin: "10px",
        "&:hover": {
          backgroundColor: "green"
        }
      }
    }
  }
};

Upvotes: 4

Related Questions