<App> has <Header> and <Content> components. I am trying to calculate height of <Content> ie (App height - header height).
// 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)"
is not working and giving error ie 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)"
is not working and giving error ie Invalid property value. How to fix this?
CodeSandbox demo.
