时间戳

首页 > 解决方案 > 在 React Material-UI makeStyles 中引用窗口大小

reactjs - 在 React Material-UI makeStyles 中引用窗口大小

问题描述

当我为一个组件制作自定义样式时，我会有一个类似的 const：

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    screen: {
      margin: 0,
      padding: 0
    },
    surface: {
      backgroundColor: theme.palette.primary.main,
      height: // use windowSize here
    }
  })
);

然后在功能组件中执行此操作：

const windowSize = useWindowSize(); // { width:number, height:number }
const classes = useStyles();
return (
<Container fixed className={classes.screen}>
  <Grid container className={classes.surface}>
    <br />
  </Grid>
</Container>

当我想参考窗口大小（例如，窗口高度）时，我可以写

  <Grid container className={classes.surface} height="75%">

但是不可能包含该信息makeStyles并计算数字，例如相当于calc(100vw - 100px)？
如果我calc直接在里面写makeStyles它是行不通的。

我找到了一个库react-use，其中一个钩子useWindowSize可以处理这个问题，但不确定我是否能做到。我没有办法使用height属性吗？

标签： reactjsmaterial-ui

解决方案

这种方法部分有效，尽管它不会在调整屏幕大小（需要重新加载）时实时更新高度。

参考：https ://github.com/pdeona/responsive-layout-hooks

下一个问题：React Material-UI makeStyles中实时参考窗口大小

// 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;

推荐阅读