<App>有<Header>和<Content>组件。我正在尝试计算<Content> ie 的高度（应用程序高度 - 标题高度）。

// App.js

import { useStyles } from "./AppStyles";
import Box from "@mui/material/Box";
import Header from "./Header";
import Content from "./Content";

export default function App() {
  const classes = useStyles();
  const { root } = classes;

  return (
    <Box className={root}>
      <Header />
      <Content />
    </Box>
  );
}

// AppStyles.js

import { makeStyles } from "@mui/styles";

export const useStyles = makeStyles((theme) => ({
  root: {
    height: "100vh" // <App> height
  },
  heading: {
    border: "1px solid blue",
    height: "4rem" // Height for <content>
  },
  content: {
    border: "1px solid green",
    height: `calc(100vh-4rem)`, // Invalid property value
    overflowY: "auto"
  }
}));

height: "calc(100vh-4rem)" 不工作并给出错误，即Invalid property value。

// Content.js

import { useStyles } from "./AppStyles";
import Typography from "@mui/material/Typography";

export default function App() {
  const classes = useStyles();
  const { content } = classes;

  return (
    <Typography className={content}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id varius
      sem. Aliquam aliquam leo quis turpis hendrerit dapibus. Mauris ullamcorper
      luctus faucibus. In consectetur, massa at sollicitudin facilisis, velit
      ..
    </Typography>
  );
}

// Header.js

import { useStyles } from "./AppStyles";
import Typography from "@mui/material/Typography";

export default function App() {
  const classes = useStyles();
  const { heading } = classes;

  return <Typography className={heading}>header</Typography>;
}

height: "calc(100vh-4rem)" 不工作并给出错误，即Invalid property value。如何解决这个问题？

CodeSandbox演示。