Referring to window size in React Material-UI makeStyles - reactjs

Question

When I make a custom style for one component, I would have a const like:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
screen: {
margin: 0,
padding: 0
},
surface: {
backgroundColor: theme.palette.primary.main,
height: // use windowSize here
}
})
);
and then do this in the functional component:
const windowSize = useWindowSize(); // { width:number, height:number }
const classes = useStyles();
return (
<Container fixed className={classes.screen}>
<Grid container className={classes.surface}>
<br />
</Grid>
</Container>
When I want to refer the window size (e.g., window height), I can write
<Grid container className={classes.surface} height="75%">
but wouldn't it possible to include that information in makeStyles and compute the number, for example the equivalent to calc(100vw - 100px)?
If I write that calc directly in the makeStyles it would not work.
I have found a library react-use where a hook useWindowSize could handle this issue, but not sure if I can do it. Do I have no way than use the height attribute?

Answer 1

This approach partially works, though it will not update the height in real time when the screen is resized (reloading needed).
Reference: https://github.com/pdeona/responsive-layout-hooks
Next question: Referring to window size in React Material-UI makeStyles in real time
// WindowSizeManager.tsx
import React, { createContext, useContext, ReactNode } from 'react';
import { useWindowSize } from 'react-use';
interface IProps {
children: ReactNode;
size?: { width: number; height: number };
}
export const WindowSizeContext = createContext({ width: 0, height: 0 });
const WindowSizeManager = ({ children }: IProps) => {
const size = useWindowSize();
return (
<WindowSizeContext.Provider value={size}>
{children}
</WindowSizeContext.Provider>
);
};
export const useWindowSizeManager = () => {
return useContext(WindowSizeContext);
};
export default WindowSizeManager;
// SomeComponent.tsx
import React from 'react';
import Container from '#material-ui/core/Container';
import { Grid, makeStyles, Theme, createStyles } from '#material-ui/core';
import { height } from '#material-ui/system';
import { useWindowSizeManager } from './WindowSizemanager';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
screen: {
margin: 0,
padding: 0
},
surface: {
backgroundColor: theme.palette.primary.main,
height: useWindowSizeManager().height - 100
}
})
);
const SomeComponent: React.FC = props => {
const classes = useStyles(props);
return (
<Container fixed className={classes.screen}>
<Grid container className={classes.surface}>
{useWindowSizeManager().height}
</Grid>
</Container>
);
};
export default SomeComponent;