Ссылаясь на размер окна в React Material-UI makeStyles - PullRequest
Новая
       28

Ссылаясь на размер окна в React Material-UI makeStyles

0 голосов
/ 13 июня 2019

Когда я создаю собственный стиль для одного компонента, у меня будет константа типа: 

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?

1 Ответ

0 голосов
/ 13 июня 2019

Этот подход частично работает, хотя он не обновляет высоту в режиме реального времени при изменении размера экрана (требуется перезагрузка).

Ссылка: https://github.com/pdeona/responsive-layout-hooks

Следующий вопрос: Ссылаясь на размер окна в make-стилях React Material-UI в реальном времени 

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