// 用 npm 安装
npm install @material-ui/core

// 用 yarn 安装
yarn add @material-ui/core

npm install @material-ui/icons

 <Icon>star</Icon>

npm install material-design-icons

$ npm install typeface-roboto --save
// entry.js
import 'typeface-roboto'

//安装
npm install material-design-icons-iconfont --save

import 'material-design-icons-iconfont/dist/material-design-icons.css'

<i className="material-icons">face</i>

import Icon from "@material-ui/core/Icon";
<Icon >backup</Icon>

<Icon style={}>{item.icon}</Icon>

    // 用npm安装
    npm install @material-ui/styles

    // 用yarn安装
    yarn add @material-ui/styles

    **第一步**： import { makeStyles } from '@material-ui/core/styles';

    **第二步**： const useStyles = makeStyles({
    					  root: {
    					    color: 'white',
    					    height: 48,
    							...
    					  },
    					});

    **第三步**：const classes = useStyles();

    **第四步**：className={classes.root}


    import React from 'react';
    import { makeStyles } from '@material-ui/core/styles';  //**第一步**
    import Button from '@material-ui/core/Button';

    const useStyles = makeStyles({   //**第二步**
      root: {
        background: 'rgba(255, 105, 135, .3)',
        height: 48,
        padding: '0 30px',
      },
    });

    export default function Hook() {
      const classes = useStyles();       //**第三步**
      return (
    			<Button className={classes.root}>Hook</Button>  //**第四步**
    	);
    }

    CSS
    .sidebar-switch-wrap {
      display: flex;
      justify-content: flex-start;
    }

    JSS
    right: {
        display: "flex",
        flexDirection: "column",
    },

//CSS写法：
  className={CX({
    "font-h1-default": true
    "font-h1-choosen": item.href === newHref
  })}

//JSS写法：
  className={CX({
    [classes.fontH1Default]: true,
    [classes.fontH1Choosen]: item.href === newHref
  })}

goback: {
    width: 24,
    "&:hover": {
      backgroundColor: "#F7F6F3",
      cursor: "pointer"
    },
    "&:active": {
      backgroundColor: "#DAD9D7"
    }
  },

const useStyles = makeStyles({
  root: {
    color: 'red',
    '& p': {
      color: 'green',
      '& span': {
        color: 'blue'
      }
    }
  },
});

    const useStyles = makeStyles({
      foo: props => ({
        backgroundColor: props.backgroundColor,
      }),
      bar: {
        color: props => props.color,
      },
    });

    function MyComponent() {

      const props = { backgroundColor: 'black', color: 'white' };

      const classes = useStyles(props);   //**传入属性**

      return <div className={`${classes.foo} ${classes.bar}`} />
    }

    **//设置容器固定宽高, 实际项目中使用**

    import React from "react";
    import { makeStyles } from "@material-ui/styles";
    const useStyle = makeStyles({
      LyoutContainerTB: newType => ({
        display: "flex",
        alignItems: "center",
        width: "100%",
        paddingTop: newType.paddingTop,
        paddingBottom: newType.paddingBottom
      })
    });

    function LyoutContainerTB(props) {
      const { type, children } = props;
      const newType = { paddingTop: type, paddingBottom: type };
      const classes = useStyle(newType);
      return <div className={`${classes.LyoutContainerTB}`}>{children}</div>;
    }
    export default LyoutContainerTB;

const useStyles = makeStyles({
    root: `font-size: 16px; border: 0; color: white; height: 48px; padding: 0 30px; box-shadow: 0 3px 5px 2px rgba(255, 105, 135, 0.3);`,
    '@media print': {
    button: `color: black`
    },
    '@keyframes id': {
    from: `opacity: 0`,
    to: `opacity: 1`
    }
});