Question

材料UI在其docs中说明了显示，以此作为一种快速而灵敏地切换组件显示值的方式！我有一个图标，希望它隐藏在xs上。我在尝试 display={{ xs: 'none', sm: 'block' }}无效。我正在尝试display='none'只是看它是否隐藏，也不起作用。如果我设置了className={classes.icon}，然后在useStyles中创建了一个图标类

 icon: {
    display: none,
  },

图标被隐藏。这种行为使我发疯，但可以肯定的是，我缺少关于这些事情如何发生或某些东西凌驾于行为的概念。我也不知道如何在useStyle内使用display={{ xs: 'none', sm: 'block' }}，因为那里不允许使用双括号

这里是完整代码：

const useStyles = makeStyles((theme) => ({
 

  icon: {
    paddingRight: 10,
    color: 'white',
    display: 'none', //setting this hides the icon
  },

}

<Grid item container xs={12}>
  <AccountBalanceIcon fontSize='large' className={classes.icon} display={{ xs: 'none', sm: 'block' }}/>           
</Grid>

Answer 1

当屏幕宽度变为 AdbIcon 时，您可以通过在 xs 钩子中使用 [theme.breakpoints.only("xs")] 来隐藏 useStyles :-

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {
  Box
} from '@material-ui/core';
import AdbIcon from '@material-ui/icons/Adb';

const useStyles = makeStyles((theme) => ({
  icon: {
    color: 'red',
    [theme.breakpoints.only("xs")]: {
      display: "none",
    },
  }
}));

export default function ButtonSizes() {
  const classes = useStyles();

  return (
   
      <AdbIcon
        fontSize="large"
        className={classes.icon}
      />
    
  );
}

阅读由 material-ui here

给出的所有断点查询

Answer 2

“ display”属性属于“ Box”组件，而不属于Icon组件。图标必须包装在“框”组件中。以下示例起作用：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {
  Box
} from '@material-ui/core';
import AdbIcon from '@material-ui/icons/Adb';

const useStyles = makeStyles((theme) => ({
  icon: {
    color: 'red',
    //display: 'none',
  }
}));

export default function ButtonSizes() {
  const classes = useStyles();

  return (
    <Box
      display="block"
      //display="none" 
    >
      <AdbIcon
        fontSize="large"
        className={classes.icon}
      />
    </Box>
  );
}

材质UI显示属性不会隐藏内容

2 个答案: