代码之家  ›  专栏  ›  技术社区  ›  MeltingDog

如何使用物料界面在某个断点处隐藏/显示元素?

  •  1
  • MeltingDog  · 技术社区  · 5 年前

    我想在某些断点上显示/隐藏元素,比如我将对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>
      )
    }
    
    1 回复  |  直到 5 年前
        1
  •  1
  •   Shiladitya    5 年前

    给你一个解决方案

    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 组件。