如何使用 Material UI 在某些断点处隐藏/显示元素？

Question

我想在某些断点上显示/隐藏元素，就像我对 Bootstraph 或 Zurb Foundation 所做的那样。

我在此处的文档中看到https://material-ui.com/system/display/#api我们添加

display={{ xs: 'block', md: 'none' }}

到我们的元素。我已经这样做了，但没有得到任何结果 - 没有隐藏/显示元素，没有错误，没有编译问题。

有人知道这是如何做到的吗？

我的代码是：

import React from 'react'
import PropTypes from 'prop-types'
import makeStyles from '@material-ui/core/styles/makeStyles'
import Button from '@material-ui/core/Button'

const useStyles = makeStyles(styles)
const PhoneActionLink = ({ children, prefix, href, value, display, isFirst, ...other }) => {
  const classes = useStyles()

  return (
      <Button
        display={{ xs: 'block', md: 'none' }}
        {...other}
      >
        {children}
      </Button>
    </div>
  )
}

Answer 1

给你一个解决方案

import React from 'react'
import PropTypes from 'prop-types'
import makeStyles from '@material-ui/core/styles/makeStyles'
import Box from '@material-ui/core/Box'
import Button from '@material-ui/core/Button'

const useStyles = makeStyles(styles)
const PhoneActionLink = ({ children, prefix, href, value, display, isFirst, ...other }) => {
  const classes = useStyles()

  return (
    <Box component="Button" display={{ xs: 'block', md: 'none' }} m={1}>
      {children}
    </Box>
  )
}

将Button组件包裹在组件内Box。

Answer 2

答案严格取决于您使用的 MUI 版本。

接受的答案应该适用于 MUI v4 和之前的版本，但对我不起作用（MUI v5）。

我深入研究了MUI 官方网站的文档，发现以下代码对我有用：

<Box sx={{ display: { xs: 'block', md:'none' } }}>
   {children}
</Box>

我猜测 sx 属性允许您根据特定断点修改一些 CSS 属性。

我不是专家，所以我无法完全解释该解决方案，但我希望该解决方案可以帮助其他人。