Referring to window size in React Material-UI makeStyles

问题

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?

回答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;

来源：https://stackoverflow.com/questions/56571363/referring-to-window-size-in-react-material-ui-makestyles

标签

reactjs

material-ui