calc函数的无效属性值错误

如何解决calc函数的无效属性值错误

alc() 中的值必须用空格分隔。

height: "calc(100vh - 4rem)"

解决方法

<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演示。