使用makeStyles的MUI className不适用于CSS实现，但是样式适用吗？

Question

我在这里有代码，“ DisplayPage” useStyle中的宽度不起作用。但是，当我应用style = {{width：calc(100% - ${drawerWidth}px)}}时，它将开始工作。对于某些人来说，这很令人困惑，但是在某些情况下，它们不起作用。不太确定决定哪种样式实施的因素是什么？

我怎么知道何时将应用makeStyles？

const drawerWidth = 240;

// MUI Setting
const useStyles = makeStyles((theme) => ({
  displayPage: {
    [theme.breakpoints.up('sm')]: {
      marginLeft: drawerWidth,
      height: `100%`,
      width: `calc(100% - ${drawerWidth}px)`,
    },
    [theme.breakpoints.up('xs')]: {
      width: '100%',
      height: `calc(100% - 64px)`,
    },
  },
}));

      <div
        className={classes.displayPage}
        style={{ width: `calc(100% - ${drawerWidth}px)` }}
      >


export default connect(mapStateToProps, mapDispatchToProps)(App);