zoukankan      html  css  js  c++  java
  • 使用 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代码的不同的部分
    天光云影,于岁月中隐隐闪烁,有人在其中看见复生,有人于其中遇见死亡。 佛家的箴言恍恍惚惚刻进石碑,你经历了来来去去的分与合。 你在尘世中沉思,或疑惑,或明悟,浑浑噩噩却也终将学会懂得。 人生的路上,你种什么因,便得什么果。
  • 相关阅读:
    关于pem与ppk格式的密钥的相互转换
    关于linux免密登录的配置及ssh客户端基于私钥文件的登录
    关于yum update和yum upgrade的区别
    Golang文件操作整理
    整理那些用于基本生存的shell命令
    Docker command line 学习笔记
    关于fork
    tips for using shortcuts
    chapter2
    使用MarkDown的编辑器
  • 原文地址:https://www.cnblogs.com/yuxx/p/12090147.html
Copyright © 2011-2022 走看看