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

Question

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

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

Answer 1

只在 return 中使用条件来显示或不显示会更容易。

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