在多用户界面v5中设置断点的多个参数

Question

在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中相同的功能，在这种情况下，可以在单个断点下调整多个参数。似乎控件已经倒置了，虽然这通常是有用的，但我也希望能够使用原始版本。这个是可能的吗？

Answer 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',
          },
        }),
      ]}
    >

Answer 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,
    },
}}