在 MUI v5 的断点上设置多个参数答案

【问题标题】：Setting multiple parameters on breakpoint in MUI v5在 MUI v5 的断点上设置多个参数
【发布时间】：2022-07-30 06:44:12
【问题描述】：

在 MUI v4 中，我能够使用以下内容在单个媒体查询上设置多个样式参数：

 [theme.breakpoints.up('xs')]: {
      width: 100px,
      color: green,
    },
 [theme.breakpoints.up('md')]: {
      width: 400px,
      color: blue,
    },

在 MUI v5 中，我可以使用 sx 属性在组件上单独设置它们，这是一种相对方便的方式：

...
sx={{
  width: {xs:'100px', md:'400px'},
  color: {xs: 'green', md:'blue'}
}}

但是我希望能够实现与 v4 中相同类型的功能，其中可以在单个断点下调整多个参数。似乎控件已被反转，虽然这通常很有用，但我也希望能够使用原始版本。这可能吗？

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

我找到了办法。

使用回调功能，可以像在 v4 中一样进行设置。

    <Box
      sx={[
        { // Add parameters that span all sizes
          display: 'flex',
          backgroundColor: {
            // Can also mix responsive parameters up here
            xs: 'yellow',
            md: 'purple'
        },

        // Add responsive parameters
        (theme) => ({
          [theme.breakpoints.between('xs', 'md')]: {
            color: 'blue',
            border: '2px solid red',
          },
          [theme.breakpoints.up('md')]: {
            color: 'green',
            border: '2px solid purple',
          },
        }),
      ]}
    >

【讨论】：

【解决方案2】：

这似乎对我有用。

import { useTheme } from '@mui/material/styles';

...

function MyComponent() {
  const theme = useTheme();

...

sx={{
 [theme.breakpoints.up('xs')]: {
      width: 100px,
      color: green,
    },
 [theme.breakpoints.up('md')]: {
      width: 400px,
      color: blue,
    },
}}

【讨论】：