Search code examples
cssreactjsmaterial-uijssinline-styles

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>

Code as above, but I didn't the right thing, don't know where is the problem? not support vw + px?

Solution

  • Your styles has lower priority than the one from MUI, try adding a couple of ampersands to increase the CSS specificity.

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

    References