与 Material UI 主题反应 - 设置全局颜色变量

Question

如何使用自定义的全局 css 覆盖默认的 material-ui 主题？另外，我们如何在主题化时使用颜色的 HEX 值来设置主色和辅助色？

App.js

我有根文件 App.js，我在其中创建了自定义主题，我需要在我的自定义主题中应用外部 css，比如 custom-style.css，以覆盖 Material-UI 的默认样式。 （努力获得各种状态和按钮状态颜色的表单元素颜色的样式，要 具体的！ )

代码如下：

App.js

const theme = createMuiTheme({  
  palette: {
    primary: '#2765af',
    secondary: '#f56428',
  },
  status: {
    danger: 'orange',
  },
});

function App(){
    <ThemeProvider theme={theme}>
        ...
    <ThemeProvider>     
}

不允许使用 HEX 代码并引发编译错误。如果我不使用主题对象并将该文件添加到 App.js 中来试试运气，自定义 CSS 文件 ( custom-styles.css ) 样式也会被默认样式覆盖。

请帮帮我。

Answer 1

示例： https://codesandbox.io/s/testing-material-ui-typography-w6et9

带有按钮自定义颜色的演示。 应用主题中的十六进制颜色覆盖主题颜色：index.js。

const theme = createMuiTheme({
  palette: {
    primary: { main: "#d41252" },
    secondary: { main: "#F1B929" }, 
    type: "dark"
  }
});