ReactJS中Material UI的SpeedDial如何设置自定义Hex十六进制颜色？

你可以通过以下3种常见方式实现自定义色值设置： #

方案1：通过FabProps的sx属性直接内联设置（最快捷，适合单次使用场景） #

直接在FabProps中传入sx配置覆盖Fab按钮的样式，示例代码如下：

<SpeedDial
  ariaLabel="SpeedDial openIcon example"
  className={st.speedDial}
  FabProps={{
    sx: {
      bgcolor: '#F19920', // 自定义背景色
      color: '#fff', // 自定义图标/文字颜色
      '&:hover': {
        bgcolor: '#d88310' // 自定义hover状态的背景色，可按需调整
      }
    }
  }}
></SpeedDial>

方案2：在主题中注册自定义颜色变体（适合多场景复用） #

如果项目中多处需要用到该自定义颜色的SpeedDial，可以先在全局主题中注册自定义变体，之后直接像调用预设色一样使用即可：

1. 全局主题配置中添加自定义Fab变体：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiFab: {
      variants: [
        {
          props: { color: 'custom' },
          style: {
            backgroundColor: '#F19920',
            color: '#fff',
            '&:hover': {
              backgroundColor: '#d88310'
            }
          }
        }
      ]
    }
  }
});

// 根组件用ThemeProvider包裹注入主题

2. 调用时直接使用自定义的color属性：

<SpeedDial
  ariaLabel="SpeedDial openIcon example"
  className={st.speedDial}
  FabProps={{
    color: "custom",
  }}
></SpeedDial>

方案3：通过自定义CSS类覆盖样式（适合原生样式管理项目） #

如果你的项目用CSS/LESS/SASS管理样式，可以直接通过父类选择器覆盖Fab的默认样式：

/* 你的样式文件中 */
.speedDial .MuiFab-root {
  background-color: #F19920;
  color: #fff;
}
.speedDial .MuiFab-root:hover {
  background-color: #d88310;
}

内容的提问来源于stack exchange，提问作者Azin