在 makeStyles 中使用 calc() 函数

IT技术 css reactjs material-ui jss inline-styles
2021-03-26 15:22:11 
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>

代码如上，但我没写对，不知道问题出在哪里？不支持大众+像素？

1个回答

您的样式的优先级低于 MUI 中的样式，请尝试添加几个& 符号以增加 CSS 特异性。

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

参考

谢谢，它有效，作为优先事项，这对我来说是新事物，有没有相关的文档？
2021-06-03 15:22:11
@will 这是 CSS 的基本知识。您可能在某处设置了具有类名的宽度的样式，例如.MuiTextField-root，如果您添加&&样式，则您的样式有 2 个重复的类名.makeStyles-1.makeStyles-1，例如，因为 2 大于 1，您的样式会覆盖另一个。
2021-06-05 15:22:11
其它你可能感兴趣的问题
上一篇next-redux-wrapper TypeError: nextCallback 不是 wrapper.getServerSideProps 中的函数错误 下一篇拒绝连接到 x 因为它违反了以下内容安全策略指令 (connect-src)