在makeStyles中使用calc()函数

问题描述

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
  }
}

引用

• https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
• https://cssinjs.org/jss-plugin-nested?v=v10.8.1#use--to-reference-selector-of-the-parent-rule

这篇关于在makeStyles中使用calc()函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！