显示在断点中不显示 MaterialUi 中的元素

Question

我有一个box component。如果props 为假，我需要隐藏它并显示其中一个是否为真。但是当props 为真时，它是隐藏的。但是当我切换到另一个组件并返回到带有框的组件时，它变得可见。

<Box                              
            component={Grid}
            display={{
              xs: error || activity ? "block" : "none",
              sm: error || activity ? "block" : "none",
              md: "block",
            }}
           
          >
            <Component/>
          </Box> 

Answer 1

在您的退货中使用一个条件来显示或不显示它会更容易。

function theBox(props){
  return (
  { props.display &&
         <Box                              
            component={Grid}
            display={{
              xs: error || activity ? "block" : "none",
              sm: error || activity ? "block" : "none",
              md: "block",
            }}
          >
            <Component/>
          </Box> 
  }
 );
}