reactjs - Material-UI 主题覆盖利用主题调色板颜色

Question

我目前正在使用全局主题覆盖自定义一些组件，希望尽可能保持 Material-UI 主题引擎的完整性。我知道我可以使用组合来完成我想要做的事情，但我想看看是否可以通过覆盖来实现这一点。

目标

更改 BottomNavigation 组件的背景颜色以使用当前主题的主颜色，并确保标签获得在该背景颜色之上清晰可见的颜色。

我目前的方法

const theme = createMuiTheme({
    palette: {
      primary: {
        main: 'rgba(217,102,102,1)'
      }
    },
    overrides: {
        MuiBottomNavigation: {
            root: {
                backgroundColor: 'rgba(217,102,102,1)'
            }
        },
        MuiBottomNavigationAction: {
            wrapper: {
                color: '#fff'
            }
        }
    }
});

此代码完成任务并将底部导航变为红色，标签/图标变为白色。但是，我希望能够灵活地更改调色板中的主色并相应地更新组件。

我正在尝试做什么

const theme = createMuiTheme({
    palette: {
      primary: {
        main: 'rgba(217,102,102,1)'
      }
    },
    overrides: {
        MuiBottomNavigation: {
            root: {
                backgroundColor: 'primary.main'
            }
        },
        MuiBottomNavigationAction: {
            wrapper: {
                color: 'primary.contrastText'
            }
        }
    }
});

通过这种方式，我可以轻松更新原色，而不必担心在覆盖中更改对它的每个引用。我意识到我可以将 rgba 值提取到 const 中，这将实现我的部分目标，但我不知道如何访问像 const 这样有用的东西code>contrastText，以防我选择更浅的原色。

那么 - 有谁知道在主题覆盖定义中引用主题调色板颜色的方法吗？任何帮助将不胜感激!

Answer 1

这里还有另一种方法。 createMuiTheme accepts any number of additional theme objects to be merged together .

考虑到这一点，您可以复制 your accepted answer没有两个不同的 ThemeProvider。如果您将主题定义移至其自己的模块，则不会在每次渲染时重新创建它。

import { createMuiTheme } from "@material-ui/core/styles";

const globalTheme = createMuiTheme({
  palette: {
    primary: {
      main: "rgba(217,255,102,1)"
    }
  }
});

const theme = createMuiTheme(
  {
    overrides: {
      MuiButton: {
        root: {
          backgroundColor: globalTheme.palette.primary.main
        },
        label: {
          color: globalTheme.palette.primary.contrastText
        }
      }
    }
  },
  globalTheme
);

export default theme;

我更新了 CodeSandBox来反射(reflect)这一点。