使用 material-ui 中的组件 修改按钮的颜色(theme)

看官方文档https://material-ui.com/customization/color/#color,对颜色的使用以及引用都有讲解。

遇到的问题:色调的颜色出不来。

解决之后的代码贴出来:

import React from 'react';
import './App.css';
import Button from '@material-ui/core/Button';
import { makeStyles, createMuiTheme,createStyles, Theme ,ThemeProvider} from '@material-ui/core/styles';
import { deepOrange} from '@material-ui/core/colors';
const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    margin: {
        margin: theme.spacing(1),
      },
  }),
);
const theme = createMuiTheme({
    palette: {
      primary: deepOrange,
      secondary: {
        main: '#ff8a65',
      },
    },
  });
const App: React.FC = () => {
    const classes = useStyles();
  return (
    <div>
      <ThemeProvider theme={theme}>
        <Button variant="contained" size="medium"  color="secondary" className={classes.margin}>
          添加菜单
        </Button>
        <Button variant="contained" size="medium" color="primary" className={classes.margin}>
          刷新
        </Button>
      </ThemeProvider>
        <div>

        </div>
    </div>
  );
}

export default App;
效果图:
注意:看button代码的不同的部分

猜你喜欢

转载自www.cnblogs.com/yuxx/p/12090147.html