在 makeStyles 中使用 calc() 函数

Use calc() function in makeStyles

const useStyles = makeStyles((theme) => ({
  dialog: {
    '& .MuiTextField-root': {
      margin: theme.spacing(1),
    }
  },
  address: {
    width:"calc(24vw + 8px)"
  },
}));

<div>
 <TextField id="contact-tel" style={{width:'10vw'}} label="联系电话" inputRef={tellRef} margin='none' />
 <TextField id="contact-company" style={{width:'14vw'}} label="公司名称" inputRef={companyRef} margin='none' />
</div>
<div>
  <TextField id="contact-address" className={classes.address} label="收件地址" inputRef={addressRef} margin='none' />
</div>

代码如上，但是我没有做对，不知道问题出在哪里？不支持 vw + px?

您的样式的优先级低于来自 MUI 的样式，请尝试添加几个 ampersands 以提高 CSS 特异性。

address: {
  width: "calc(24vw + 8px)",
  "&&": {
    width: "calc(24vw + 8px)" // same as the above but with higher priority
  }
}

参考资料