material ui_如何在Material UI中使用CSS断点

material ui

In the world of web design, CSS breakpoints help us design a more robust, responsive website, detecting when to show and hide certain elements, resizing components to fit, or stretch on mobile devices, achieving a smooth user experience.

在网页设计领域，CSS断点可帮助我们设计一个更强大，响应能力更强的网站，检测何时显示和隐藏某些元素，调整组件的大小以适合或延伸到移动设备上，以实现流畅的用户体验。

In this article we will discuss how to use CSS breakpoints in Material UI.

在本文中，我们将讨论如何在Material UI中使用CSS断点。

Here is the example Github repo we will be using if you just want to dive into the code. You can view the Readme to get started.

如果您只是想深入研究代码，这是我们将使用的示例Github存储库。 您可以查看自述文件以开始使用。

什么是CSS断点？ (What is a CSS breakpoint?)

A breakpoint is defined in CSS when it detects certain screen sizes, and when the defined breakpoint is hit it will then show appropriate content for that screen size. For instance, on a desktop browser you have plenty of room to show large and wide elements, however, on a mobile device you have to plan out what you absolutely need to show and what will decrease in size.

当CSS检测到特定的屏幕尺寸时，就会在CSS中定义一个断点，并且当点击定义的断点时，它将为该屏幕尺寸显示适当的内容。 例如，在台式机浏览器上，您有足够的空间来显示大而宽的元素，但是，在移动设备上，您必须计划绝对需要显示的内容，以及将缩小的内容。

如何在CSS中使用断点？ (How do I use a breakpoint in CSS?)

@media only screen and (max-width: 600px) {
  body {
    background-color: green;
  }
}

In this CSS example we define a breakpoint with a media query. It sets a break point, saying only apply this CSS if the screen has a max width of 600 pixels or less. When the screen size if 600 pixels or less, it will apply the green background color. When the screen size is greater, it will not apply the green background.

在此CSS示例中，我们使用媒体查询定义了一个断点。 它设置了一个断点，表示仅在屏幕的最大宽度为600像素或更小时才应用此CSS。 当屏幕尺寸小于或等于600像素时，它将应用绿色背景色。 当屏幕尺寸更大时，它将不会应用绿色背景。

Now let’s see how we can achieve the same thing using Material UI.

现在，让我们看看如何使用Material UI实现相同的功能。

useMediaQuery (useMediaQuery)

useMediaQuery is a Material UI React hook that you can use in your component, that when hit will cause a re-render, thus giving you control on whether you want to show or hide components, and so much more.

useMediaQuery是一个Material UI React钩子，您可以在组件中使用它，单击该钩子将导致重新渲染，从而使您可以控制是否要显示或隐藏组件，等等。

Let’s begin by using a simple media query.

让我们从使用简单的媒体查询开始。

const SimpleMediaQuery = () => {
  const matches = useMediaQuery("(min-width:600px)");
  
  if (matches) {
    return (
      <Paper elevation={5}>
        <Box p={5}>SimpleMediaQuery breakpoint has a min width of 600px</Box>
      </Paper>
    );
  }  return <></>;
};

Using the React hook:

使用React钩子：

const matches = useMediaQuery("(min-width:600px)");

This will check if the breakpoint has a minimum width of 600px. If it matches, meaning if the screen is at least 600px or greater, then it will render the text. If it doesn’t match then it wont render anything.

这将检查断点的最小宽度是否为600px。 如果匹配，则意味着屏幕至少为600px或更大，它将呈现文本。 如果不匹配，则不会渲染任何内容。

Now let’s use a breakpoint helper to achieve the same thing.

现在，让我们使用断点助手来实现相同的目的。

const BreakpointHelper = () => {
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.up("sm"));
  
  if (matches) {
    return (
      <Paper elevation={5}>
        <Box p={5}>
          BreakpointHelper will render everything up from 'sm' which is 600px
        </Box>
      </Paper>
    );
  }
  return <></>;
};

So let’s explain the breakpoint helper:

因此，让我们解释一下断点助手：

theme.breakpoints.up(“sm”) 

This is creating a breakpoint based upon the helpers setup by Material UI.

这是根据Material UI的帮助程序设置创建断点的。

xs, extra-small: 0px
sm, small: 600px
md, medium: 960px
lg, large: 1280px
xl, extra-large: 1920px

So anything that is up, or greater than sm, which is 600px, then render the text.

因此，任何up或大于sm (等于600px)的东西 ，都将渲染文本。

There are other methods of achieving this as described on the Material UI website.

如Material UI网站上所述，还有其他方法可以实现此目的。

在makeStyles中使用断点 (Using breakpoints in makeStyles)

const useStyles = makeStyles((theme) => ({
  root: {
    [theme.breakpoints.down("sm")]: {
      backgroundColor: theme.palette.secondary.main,
    },
    [theme.breakpoints.up("md")]: {
      backgroundColor: theme.palette.primary.main,
    },
    [theme.breakpoints.up("lg")]: {
      backgroundColor: "green",
    },
  },
}));const MakeStylesExample = () => {
  const classes = useStyles();
  return (
    <Paper elevation={5} className={classes.root}>
      <Box p={5}>The background color will change based on screen width</Box>
    </Paper>
  );
};

This example uses the makeStyles function to create styles we can use in our component. First we setup a root class name and we assign it to the Paper component’s className.

本示例使用makeStyles函数创建可在组件中使用的样式。 首先，我们设置一个根类名称，并将其分配给Paper组件的className。

<Paper elevation={5} className={classes.root}>

We give the makeStyles root to the Paper className.

我们将makeStyles根设为Paper className。

[theme.breakpoints.down("sm")]: {
  backgroundColor: theme.palette.secondary.main,
}

When the breakpoint hits, using the breakpoint helpers, it will apply that CSS to the element and change the background color.

遇到断点时，将使用断点助手将CSS应用于元素并更改背景颜色。

使用Box组件 (Using the Box component)

The Box component in Material UI is the best invention in our modern times. You can easily style components without using a lot of CSS. We can also use the breakpoint helpers to show or hide certain elements, and so much more.

Material UI中的Box组件是我们现代最好的发明。 您无需使用大量CSS即可轻松为组件设置样式。 我们还可以使用断点助手来显示或隐藏某些元素，等等。

const BoxExamples = () => {
  return (
    <Paper elevation={5}>
      <Box p={5} display={{ xs: "block", sm: "none", md: "block" }}>
        This will hide on `sm` but show as a `block` on `xs` and `md`
      </Box>
    </Paper>
  );
};

There are many properties on the Box component that enable us to use shorthand breakpoint helpers. In this example we are saying that for the display, when the breakpoint for xs is hit, then it will become a block element. When the breakpoint for sm is hit, then it wont render, having a display of none.

Box组件上有许多属性，使我们能够使用速记断点助手。 在此示例中，我们说的是对于显示，当击中xs的断点时，它将成为一个块元素。 当sm的断点被击中时，它将不会渲染，没有显示。

You can check out all the properties you can use on the Box component here:

您可以在此处签出可在Box组件上使用的所有属性：

使用样式组件包 (Using the styled-components package)

There are many ways to use CSS in React. This example will go over how to use Material UI with styled-components.

在React中有很多使用CSS的方法。 本示例将介绍如何将Material UI与样式组件一起使用。

import { compose, spacing, palette, breakpoints } from "@material-ui/system";
import styled from "styled-components";const Box = styled.div`
  ${breakpoints(compose(spacing, palette))}
`;const BoxExamples = () => {
  return (
    <Paper elevation={5}>
      <Box p={{ xs: 5, sm: 10 }}>This uses a styled-components Box</Box>
    </Paper>
  );
};

So this will make a styled component div element and create it with the Material UI breakpoints function helper.

因此，这将创建一个样式化的组件div元素，并使用Material UI断点函数帮助器进行创建。

const Box = styled.div`
  ${breakpoints(compose(spacing, palette))}
`;

This will enable the styled component to use our breakpoint helpers. Now we can say that when the xs breakpoint is hit, it will have a padding of 5, and when the sm breakpoint is hit, it will have a padding of 10.

这将使样式化的组件能够使用我们的断点助手。 现在我们可以说，当击中xs断点时，其填充为5，当击中sm断点时，其填充为10。

结论 (Conclusion)

Material UI has a lot of breakpoint magic built in so you can get something responsive without coding a lot of custom CSS. We went over Material UI hooks and helpers to use in our components and we checked out how we can use styled components by using Material UI breakpoint helpers.

Material UI内置了很多断点魔术，因此您无需编写大量自定义CSS即可获得响应能力。 我们遍历了Material UI钩子和帮助器以在组件中使用，并且检查了如何通过使用Material UI断点帮助器来使用样式化的组件。

There are other packages out there than can achieve the same results. What is your favorite package for using CSS breakpoints?

除了可以达到相同结果之外，还有其他软件包。 您最喜欢使用CSS断点的软件包是什么？

翻译自: https://levelup.gitconnected.com/how-to-use-css-breakpoints-in-material-ui-1781e07afc77

material ui