如何将mui样式对象扩展到其他对象,仍然能够保持主题属性功能?

2022-10-15 12:53:11标签material-ui
提问

我想把makeStyle的第一个类扩展到第二类,因为现在我必须复制这个类,这是一个非常糟糕的问题,我正在使用它(它们),如果我宣布作为const,,作为const out side makeStyle的主题将变得不可用,而且根本不会工作如何实现这个?

  textFieldA: {
    marginTop: theme.spacing(0.5),
    marginRight: theme.spacing(0.5),
    marginLeft: theme.spacing(0.5),
    width: 88,
    fontWeight: 900,
    '& .MuiInputBase-root': {
      marginTop: theme.spacing(1),
      color: grey[50],
      fontWeight: 500,
    },
    '& .MuiInput-formControl': {
      marginTop: 0,
      fontWeight: 900,
      color: grey[50],
    },
    '& .MuiFormLabel-root': {
      transform: 'translate(0, 7.3px) scale(1)',
      fontWeight: 900,
      color: grey[50],
    },
    '& .MuiTypography-root': {
      color: 'white',
      fontWeight: 500,
    },
    '& .MuiInputBase-root:before': {
      //borderBottomColor: grey[800],
      borderBottom: '2px solid ',
    },
    '& .MuiInput-underline': {
      '&:before': {
        color: grey[500],
        borderBottom: '2px solid',
      },
      '&:hover:before': {
        borderBottomColor: grey[50], // Solid underline on hover
        borderBottom: '2px solid',
      },
      '&:after': {
        borderBottomColor: grey[50], // Solid underline on focus
        borderBottom: '2px solid',
      },
    },
  },
  textFieldB: {
    marginTop: theme.spacing(0.5),
    marginRight: theme.spacing(0.5),
    marginLeft: theme.spacing(0.5),
    width: 88,
    fontWeight: 900,
    '& .MuiInputBase-root': {
      marginTop: theme.spacing(1),
      color: grey[50],
      fontWeight: 500,
    },
    '& .MuiInput-formControl': {
      marginTop: 0,
      fontWeight: 900,
      color: grey[50],
    },
    '& .MuiFormLabel-root': {
      transform: 'translate(0, 7.3px) scale(1)',
      fontWeight: 900,
      color: grey[50],
    },
    '& .MuiTypography-root': {
      color: 'white',
      fontWeight: 500,
    },
    '& .MuiInputBase-root:before': {
      //borderBottomColor: grey[800],
      borderBottom: '2px solid ',
    },
    '& .MuiInput-underline': {
      '&:before': {
        color: grey[500],
        borderBottom: 'none',
      },
      '&:hover:before': {
        borderBottomColor: grey[50], // Solid underline on hover
        borderBottom: 'none',
      },
      '&:after': {
        borderBottomColor: grey[50], // Solid underline on focus
        borderBottom: 'none',
      },
    },

▼版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说cuoshuo.com——程序员的报错记录

部分内容根据CC版权协议转载,如果您希望取消转载请发送邮件到cuoshuo8@163.com

辽ICP备19011660号-5