reactjs - 如何在 Material UI makestyles 中使用媒体查询

Question

我在 CSS/样式方面做得很差，希望能得到一些帮助

我试图根据屏幕宽度更改某些卡片的高度。使用

let mainContainerHeight = window.innerWidth < 750 ? "50vh" : "80vh"

并将其分配给 height 属性，但它仅适用于我刷新页面而不是调整它的大小。

我尝试在谷歌上搜索媒体查询和 Material UI，但它看起来完全不同，而且令人困惑......

https://material-ui.com/components/use-media-query/

有没有一种简单的方法可以将媒体查询注入(inject)到我下面的代码中？？

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';

let mainContainerHeight = window.innerWidth < 750 ? "50vh" : "80vh"


const useStyles = makeStyles({
  root: {
    minWidth: 275,
    border: "3px solid black",
    borderRadius:"5px",
    boxShadow: "10px 5px 5px red",
    padding: 0,
    height: mainContainerHeight,
    overflow:"scroll"
  },
  small:{
    border: "5px solid black",
    borderRadius:"5px",
    boxShadow: "10px 5px 5px grey",
    marginBottom:"5px",
    marginTop:"8px",
    padding:"0px"
  },
  nomination:{
    border: "3px solid black",
    borderRadius:"5px",
    boxShadow: "10px 5px 5px red",
    padding: 0,
    height:mainContainerHeight,
    overflow:"scroll"
  },
  noPadding:{
    padding:"0px !important",
  }
});

export default function SimpleCard(props) {
  const classes = useStyles();
  const style = props.small ? classes.small : props.nomination ? classes.nomination : classes.root
  const padding = props.noPadding ? classes.noPadding : ""

  return (
    <Card className={style}>
      <CardContent className={padding}>
       {props.children}
      </CardContent>
    </Card>
  );
}

Answer 1

您可以使用 50vh 作为默认 height，然后使用 theme.breakpoints.up(750)将其更改为 80vh。

const useStyles = makeStyles((theme) => {
  return {
    root: {
      minWidth: 275,
      border: "3px solid black",
      borderRadius: "5px",
      boxShadow: "10px 5px 5px red",
      padding: 0,
      height: "50vh",                    // primary height
      overflow: "scroll",
      [theme.breakpoints.up(750)]: {
        height: "80vh"                   // secondary
      }
    },
    ...
  };
});