Mui sx 样式仅在某些断点处

Question

我正在转换一些旧的 mui 样式以使用

sx

属性，并且发现您可以使用

sx = {{ someCssProp: { xs: ..., md: ...

等将样式指定为不同的断点。

我之前一直在使用

theme.breakpoints.only

进行一些样式设置，并且在阅读了有关断点使用的 官方文档之后，听起来

xs, md, ...

中的

sx

用法将仅适用于

theme.breakpoints.up

...这意味着如果我只想在

xs

进行造型，做类似的事情：

<Box sx={{background: {xs: 'blue'}}}>Some content</Box>

意味着

Box

有蓝色背景 来自 xs...

有没有办法可以复制我的

.only

用例？

Answer 1

正如您所注意到的，断点对象语法仅适用于按照文档“向上”（更大）：

断点作为对象

断点的第一个选项是 使用断点值作为键将它们定义为对象。 注意 给定断点的每个属性也适用于所有更大的断点 集合中的断点。例如，

width: { lg: 100 }

等价 到

theme.breakpoints.up('lg')

。

这确实意味着，使用您当前的代码，

Box

具有蓝色背景从

xs

向上。

由于您正在尝试为

only

一个特定断点定义样式，因此您需要使用 sx 属性中的

主题断点辅助函数

来定义自己的行为。例如：

<Box
  sx={(theme) => ({
    [theme.breakpoints.only("sm")]: {
      backgroundColor: 'blue'
    }
  })}
>
  Some content
</Box>

工作 CodeSandbox： https://codesandbox.io/s/mui-breakpoints-in-sx-only-yr7h42?file=/demo.tsx