某些material-ui组件不受createTheme和ThemeProvider影响

Question

我正在使用react和material-ui构建一个应用程序。 Material-ui 组件带有其自定义的经典蓝灰色谷歌风格颜色，我想用我的自定义颜色修改所有这些颜色。我使用 mui 中的

createTheme()

按以下方式定义我的自定义调色板：

import { createTheme } from "@mui/material/styles";

export const theme = createTheme({
  palette: {
    primary: {
      light: "yellow",
      main: "red",
      dark: "green",
      contrastText: "#000"
    },
    secondary: {
      light: "blue",
      main: "purple",
      dark: "orange",
      contrastText: "#000"
    },
    action: {
      active: "magenta",
      hover: "cyan",
      selected: "black"
    }
  }
});
export default theme;

对于大多数组件来说，这工作正常，但例如悬停时BasicSpeedDial内的图标不受影响。这是正确的行为吗？知道我是否可以使用 createTheme 而不是使用 sx props 手动修改这些组件的样式吗？一般来说，对于未来导入的 mui 组件，有没有办法为所有组件创建一个全局主题？

我附上了codesandbox的链接，其中包含一个最小的可复制示例 https://codesandbox.io/s/focused-hugle-w6ir90?file=/src/BasicSpeedDial.js

Answer 1

来自文档：

主题组件

您可以使用主题内的组件键来自定义组件的样式、默认道具等。

自定义组件的步骤是：

1. 获取

   component name

   ，在本例中为

   MuiSpeedDialAction

2. 找到本例中的API页面这个
3. 在

   css classes

   部分获取 rule name，在本例中为

   fab

4. 将自定义添加到主题：

   theme.components.${componentName}.styleOverrides.${ruleName}

另请阅读如何自定义，在那里您将找到如何自定义变体，例如outlined和contained以及pseudo选择器，例如hover和active。

// theme.js
import { createTheme } from "@mui/material/styles";

export const theme = createTheme({
  palette: {
    primary: {
      light: "yellow",
      main: "red",
      dark: "green",
      contrastText: "#000"
    },
    secondary: {
      light: "blue",
      main: "purple",
      dark: "orange",
      contrastText: "#000"
    },
    action: {
      active: "magenta",
      hover: "cyan",
      selected: "black"
    }
  },
  // HERE
  components: {
    // Component name
    MuiSpeedDialAction: {
      styleOverrides: {
        //  Rule name
        fab: {
          border: "5px solid red",
          "&:hover":{
            backgroundColor:"red",
            color:"red"
          }
        }
      }
    },
  }
});
export default theme;