Material-UI 試用紀錄

關於CSS之覆盖样式 — classes 属性

於Material UI之元件屬性中， classes 屬性可用來 override 原設定好的 css class 組態。與 className 屬性的差異在 className 是增加 css class。

Advanced (LEGACY) - MUI SystemMUI_hq

function StateChip(props: { state: string }) {
  const greenChipStyle = useGreenChipStyles()
  const orangeChipStyle = useOrangeChipStyles()
  const redChipStyle = useRedChipStyles()
  const greyChipStyle = useGreyChipStyles()

  switch (props.state) {
    case 'VITALITY':
      /* classes 屬性可用來 override 原本CSS組態 */
      return (<Chip classes={greenChipStyle} icon={<DirectionsRunIcon />} label="活力" />)
    case 'HUNGRY':
      return (<Chip classes={orangeChipStyle} icon={<DirectionsWalkIcon />} label="飢餓" />)
    case 'WEAK':
      return (<Chip classes={redChipStyle} icon={<AccessibleForwardIcon />} label="虛弱" />)
    case 'DEATH':
      return (<Chip classes={greyChipStyle} icon={<PermContactCalendarIcon />} label="死亡" />)
    default:
      return (<Chip classes={greyChipStyle} icon={<HotelIcon />} label={props.state} />)
  }
}

//----------------------------------------------------------------------------------
const useStyles = makeStyles({
  root: {
    minWidth: 275,
  },
});

const useGreenChipStyles = makeStyles({
  root: {
    backgroundColor: green[500],
    color: 'white',
  },
  icon: { color: 'white' }
});

const useOrangeChipStyles = makeStyles({
  root: {
    backgroundColor: orange[500],
    color: 'white',
  },
  icon: { color: 'white' }
});

const useRedChipStyles = makeStyles({
  root: {
    backgroundColor: red[500],
    color: 'white',
  },
  icon: { color: 'white' }
});

const useGreyChipStyles = makeStyles({
  root: {
    backgroundColor: grey[500],
    color: 'white',
  },
  icon: { color: 'white' }
});