Question

如何使用自定义的全局CSS覆盖默认的Material-ui主题？另外，在主题化时如何使用颜色的十六进制值设置原色和副色？

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>     
}

不允许使用十六进制代码，并且会引发编译错误。如果我不使用主题对象并在App.js中添加该文件以尝试运气，那么默认样式也将覆盖自定义CSS文件（custom-styles.css）样式。

请帮助我。

Answer 1

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

具有Button自定义颜色的演示。在应用程序主题：index.js中，主题颜色被十六进制颜色覆盖。

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

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

1 个答案: