如何在Reactjs Material UI上使用CSS @media与makeStyles进行响应? [英] How can I use CSS @media for responsive with makeStyles on Reactjs Material UI?

问题描述

const useStyles = makeStyles(theme => ({
  wrapper: {
    width: "300px"
  },
  text: {
    width: "100%"
  },
  button: {
    width: "100%",
    marginTop: theme.spacing(1)
  },
  select: {
    width: "100%",
    marginTop: theme.spacing(1)
  }
}));

是否可以在上述变量中​​使用CSS @media?

Is there a way to use CSS @media at the above variable?

如果不可能，如何使我的自定义CSS响应?

if impossible, how can I make my custom css for responsive?

推荐答案

下面是一个示例，显示了在makeStyles中指定媒体查询的两种方式.您可以在 theme.breakpoints中使用up，down，only和between函数. (可根据主题中指定的断点为您生成媒体查询字符串)，也可以直接使用媒体查询.

Below is an example showing two ways of specifying media queries within makeStyles. You can use up, down, only, and between functions in theme.breakpoints (which generate the media query strings for you based on the breakpoints specified in the theme), or you can use media queries directly.

import React from "react";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  button: {
    color: "white",
    [theme.breakpoints.down("xs")]: {
      marginTop: theme.spacing(1),
      backgroundColor: "purple"
    },
    [theme.breakpoints.between("sm", "md")]: {
      marginTop: theme.spacing(3),
      backgroundColor: "blue"
    },
    "@media (min-width: 1280px)": {
      marginTop: theme.spacing(5),
      backgroundColor: "red"
    }
  }
}));
export default function App() {
  const classes = useStyles();
  return (
    <Button className={classes.button} variant="contained">
      Hello World!
    </Button>
  );
}

相关文档:

• https://material-ui.com/customization/breakpoints/
• https://cssinjs.org/jss -plugin-nested/?v = v10.1.1#nest-at-rules

• https://material-ui.com/customization/breakpoints/
• https://cssinjs.org/jss-plugin-nested/?v=v10.1.1#nest-at-rules

这篇关于如何在Reactjs Material UI上使用CSS @media与makeStyles进行响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！