calc()函数的属性值错误无效

Question

<App>包含<Header>和<Content>组件。我正在尝试计算<Content>的高度(应用程序高度-收割台高度(。

//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)"不工作并且给出错误ieInvalid 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)"不工作并且给出错误ieInvalid property value。如何解决此问题？

CodeSandbox演示。

Answer 1

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

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