时间戳

首页 > 解决方案 > Material-UI 更改默认颜色

reactjs - Material-UI 更改默认颜色

问题描述

如何更改默认颜色？我需要在 theme.js 中修改什么对象？

编辑

primary我想修改不是or secondaryor的默认（灰色）error。

标签： reactjsmaterial-ui

解决方案

我遇到了与 OP 类似的问题，特别是我想将默认按钮颜色从灰色更改为白色。问题评论者是正确的，每个组件都有自己特定的样式和颜色，而不是全局默认颜色。这些需要通过自定义主题覆盖。下面是一个覆盖Button 的默认类contained的示例，通过创建主题覆盖来更改默认按钮颜色。CONTANTS用于定义具体的颜色等。

import React from 'react';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import * as CONSTANTS from './Constants'

const theme = createMuiTheme({
  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: CONSTANTS.BLUE,
      // dark: will be calculated from palette.primary.main,
      contrastText: CONSTANTS.CONTRAST_TEXT,
    },
  },
  overrides:{
    MuiButton:{
      contained:{
        color: CONSTANTS.BLUE,
        backgroundColor: CONSTANTS.CONTRAST_TEXT,
        '&:hover': {
          backgroundColor: CONSTANTS.LIGHT_BLUE,
          // Reset on touch devices, it doesn't add specificity
          '@media (hover: none)': {
            backgroundColor: CONSTANTS.CONTRAST_TEXT,
          },
        }
      }
    }
  }
});
interface IThemeProps{
  children:any;
}
export default function Theme(props: IThemeProps) {
  return (
    <ThemeProvider theme={theme}>
      {props.children}
    </ThemeProvider>
  );
}

并使用新主题：

import React from 'react';
import Theme from './Theme';
import { Header, Home } from './Components';

const App: React.FC = () => {
  return (
    <Theme>
      <Header>
        <Home />
      </Header>
    </Theme>
  );
}

export default App;

推荐阅读