[Day 6] Button

Day 5

进到了网站中最常见需要做功能性的环节
Button

  <Button variant="outlined" color="primary" >
      Primary
    </Button>

其中 variant 叙述的是语意
可以给的参数有 contained . outlined 或是 text

color意思更明确 可以给基础颜色 或通常以颜色定义功能

'default' 'inherit' 'primary' 'secondary'

另外需要特殊样式可以去建构其样式再喂入Button中

const ColorButton = withStyles(theme => ({
 root: {
   color: theme.palette.getContrastText(purple[500]),
   backgroundColor: purple[500],
   '&:hover': {
     backgroundColor: purple[700],
   },
 },
}))(Button);

把特殊样式定义成特殊元件

      <ColorButton variant="contained" color="primary" className={classes.margin}>
       Custom CSS
     </ColorButton>

这边另外要引入

import { purple } from "@material-ui/core/colors";
内建的颜色 purple紫色参数
import { withStyles } from "@material-ui/core/styles";
跟要新增样式的 withStyles

这样一个特殊样式的按钮就做完了

Day 6