使用 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代码的不同的部分


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM