Use calc() function in makeStyles

Question

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?

NearHuscarl · Accepted Answer · 2021-10-21 07:38:14Z

2

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

edited Oct 21, 2021 at 7:38

answered Oct 21, 2021 at 7:06

NearHuscarl

83.2k24 gold badges324 silver badges294 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

will Over a year ago

Thanks it works , as the priority ,it is a new thing for me , is there some doc for that ?

NearHuscarl Over a year ago

@will it's basic knowledge in CSS. you may have a styles somewhere that set the width which has a classname, for example .MuiTextField-root, if you add && in your styles, yours has 2 duplicated classNames, something like .makeStyles-1.makeStyles-1, because 2 is larger than 1, your styles overrides the other one.

Collectives™ on Stack Overflow

Use calc() function in makeStyles

1 Answer 1

References

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

References

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related