与材质用户界面主题反应-设置全局颜色变量

Question

如何使用自定义的全局css覆盖默认的资料-ui主题？此外，我们如何利用HEX值的颜色，以设置主次颜色，而主题？

App.js

我有根文件App.js，在其中我已经创建了自定义主题，我需要在我的自定义主题中应用外部css，比如定制样式.css，以覆盖资料-UI的默认样式。(具体而言，要为各种状态和按钮状态颜色获取窗体元素颜色的样式而苦苦挣扎！)

以下是代码：

App.js

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

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

不允许使用HEX代码，并引发编译错误。此外，如果我不使用主题对象并在App.js中添加该文件来尝试我的运气，那么定制CSS文件(定制样式.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"
  }
});