为什么 Material-UI 没有覆盖样式？

费尔南多·梅莫内

我在我的应用程序中使用 Material-UI。排版和托盘覆盖工作完美。但是当我尝试覆盖 MUIButton 时，没有任何反应。这是我的样式文件：

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

我完全遵循 Material-UI API，但 Button 永远不会被覆盖。我在这里做错了什么？

拉米兹·沃赫特勒

看起来您在错误的级别上定义了您的覆盖，在您的代码中，它们嵌套在中palette，但根据文档，特定组件的覆盖应该存在于配置对象的“根”级别（请参阅此处）。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。