我正在转换一些旧的 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
用例?
正如您所注意到的,断点对象语法仅适用于按照文档“向上”(更大):
断点作为对象
断点的第一个选项是 使用断点值作为键将它们定义为对象。 注意 给定断点的每个属性也适用于所有更大的断点 集合中的断点。例如,
等价 到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