Почему Material-UI не переопределяет стили?

Question

Я использую Material-UI в моем приложении. Типография и переопределение паллет работает отлично. Но когда я пытаюсь переопределить кнопку MUIB, ничего не происходит. Это мой файл стиля:

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"
          }
        }
      }
    }
  }
};

Я точно следую API-интерфейсу Material-UI, но кнопка никогда не переопределяется. Что я здесь не так делаю?

Answer 1

Похоже, что вы определили свои переопределения на неправильном уровне, в вашем коде они вложены в palette, но согласно документации, переопределения для определенного c компонента должны присутствовать в "root "уровень объекта конфигурации (см. здесь ).

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"
        }
      }
    }
  }
};