如何为 MaterialUI 组件中使用的“颜色”道具使用主题颜色

Question

尝试使用我的 Mui 调色板中的颜色作为 color 道具的值，如下所示：

示例：

  <Tabs
    indicatorColor="primary.mainGradient"
  >
    <Tab />
  </Tabs>

但这不起作用，我也试过像这样使用 useTheme：

indicatorColor={theme.palette.primary.mainGradient}

那也没有用。如何使用除 primary 以外的其他颜色作为颜色道具？

编辑：

这就是我在主题中创建颜色的方式：

    const theme = useMemo(
      () =>
        createMuiTheme({
          palette: {
            primary: {
              main: '#4297FF',
              mainGradient: "linear-gradient(-45deg,rgba(0, 101, 251, 1) 0%,rgba(0, 185, 255, 0.9251050762101716) 100%)",
            },

这是我从控制台收到的错误。

Failed prop type: Invalid prop `color` of value `linear-gradient(-45deg,rgba(0, 101, 251, 1) 0%,rgba(0, 185, 255, 0.9251050762101716) 100%)` supplied to `ForwardRef(TabIndicator)`, expected one of ["primary","secondary"]

Answer 1

indicatorColor 只接受 'primary' 和 'secondary' 值，这将 background-color 分别设置为 theme.palette.primary.main 和 theme.palette.secondary.main。

您可以看到完整的 TabIndicator API here。

要回答您的问题，您可以像这样直接向 TabIndicatorProps.style 添加自定义样式对象：

<Tabs
  TabIndicatorProps={{
    style: {
      height: 5,
      background:
        "linear-gradient(-45deg,rgba(0, 101, 251, 1) 0%,rgba(0, 185, 255, 0.9251050762101716) 100%)"
    }
  }}
>

现场演示