material-ui 根据活动断点更改值 ```markdown 根据活动断点更改值 ```

u59ebvdq 于 4个月前发布在其他

关注(0)|答案(2)|浏览(40)

能够根据活动断点使用所有值。
对于一个堆栈，我可以做到这一点：

<Stack
  direction={{ xs: 'column', sm: 'row' }}
  spacing={{ xs: 1, sm: 2, md: 4 }}
>

我希望能够做到一切。

<Button size={{ xs: "small", md: "medium" }}/>
<Button variant={{ xs: "outlined", md: "contained" }}/>

它真的很有用，易于使用！

2条答案

在我看来，对于一些已经通过 sx prop 支持的与间距、边距、填充和方向相关的属性是有意义的：

<Button sx={{ flexDirection: { xs: 'column', md: 'row' } }}>…

然而，我认为它不会根据视口变化而调整其他属性，如 variant。对我来说，这对用户来说将是一个糟糕的用户体验。

为什么使用

<Button sx={{ flexDirection: { xs: 'column', md: 'row' } }}>...

而不是

<Button direction={{ xs: "column", md: "row" }}/>

为什么还有额外的 "sx"?为什么是 "flexDirection" 而不是 "direction"?这让人感到困惑。