在Material UI的makeStyles中使用calc()函数样式不生效如何解决

问题原因排查 #

首先明确：calc完全支持vw和px两种单位混用，你的问题和单位混用无关，常见可排查点如下：

• 空格解析问题：你代码中calc(24vw + 8px)里的空格如果是复制粘贴带入的非断空格（Unicode U+00A0），而非普通半角空格，浏览器会无法识别calc表达式，直接失效。你可以手动删除表达式里的所有空格，重新输入普通半角空格再测试。
• 样式选择器优先级不够：你给TextField组件传入的className会挂载到组件最外层的容器元素上，而TextField内部的.MuiInputBase-root、.MuiInput-root等自带类有默认宽度规则，优先级高于外层容器的宽度设置，所以不会生效。你需要调整样式选择器直接命中内部控制宽度的元素，修改你的useStyles代码即可：

const useStyles = makeStyles((theme) => ({
  dialog: {
    '& .MuiTextField-root': {
      margin: theme.spacing(1),
    }
  },
  address: {
    // 直接选中TextField内部的输入框根元素设置宽度
    '& .MuiInputBase-root': {
      width: "calc(24vw + 8px)"
    }
  },
}));

• 基础调用错误：确认你在组件内部有正确调用const classes = useStyles()，classes.address的拼写没有错误，样式类没有被其他逻辑覆盖。

内容的提问来源于stack exchange，提问作者will