Question

由于某种原因，打字稿给我textTransform: 'none'属性带来了错误。

const useButtonStyles = makeStyles((theme: Theme) => createStyles({
  // @ts-ignore
  root: (props) => ({
    boxShadow: 'none',
    textTransform: 'none',
    borderRadius: 3,
    border: '1px solid',
    backgroundColor: theme.palette[props.color].main,
    borderColor: theme.palette[props.color].main,
    color: theme.palette.getContrastText(theme.palette[props.color].light),
    '&:hover': {
      backgroundColor: theme.palette[props.color].light,
      borderColor: theme.palette[props.color].light
    },
    '&:active': {
      boxShadow: 'none',
      backgroundColor: theme.palette[props.color].light,
      borderColor: theme.palette[props.color].main
    },
    '&:focus': {
      boxShadow: `${fade(theme.palette[props.color].light, 0.25)} 0 0 0 0.15rem`
    }
  }),
}));

Answer 1

在道具中添加any似乎可以解决问题。

const useButtonStyles = makeStyles((theme: Theme) => createStyles({
  root: (props: any) => ({
    boxShadow: 'none',
    textTransform: 'none',
    borderRadius: 3,
    border: '1px solid',
    backgroundColor: theme.palette[props.color].main,
    borderColor: theme.palette[props.color].main,
    color: theme.palette.getContrastText(theme.palette[props.color].light),
    '&:hover': {
      backgroundColor: theme.palette[props.color].light,
      borderColor: theme.palette[props.color].light
    },
    '&:active': {
      boxShadow: 'none',
      backgroundColor: theme.palette[props.color].light,
      borderColor: theme.palette[props.color].main
    },
    '&:focus': {
      boxShadow: `${fade(theme.palette[props.color].light, 0.25)} 0 0 0 0.15rem`
    }
  }),
}));

[Material UI + Typescript] makeStyles / createStyles与道具有关的“ textTransform”问题

1 个答案: