我可以在不重新渲染组件的情况下更新 Material-UI 中的样式吗？

Question

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

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

我知道，我可以使用条件，一切都会好的。

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

或者编写 displayStyle 并在样式中使用断点

const displayStyle =  error || activity ? "block" : "none",  

 <Box                              
        component={Grid}
        display={displayStyle}
       
      >
        <Component/>
      </Box>

但是我可以通过更新 MaterialUI

的样式来更改 display

Answer 1

您可以使用 Material-UI 钩子 makeStyles，看起来像这样：

const useStyles = makeStyles({
  root: { display: props => props.error ? 'block' : 'none' },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

或者你可以用styled-components，个人觉得比较满意，大概是这样的：

const MyButton = styled(Button)({
  display: ${(props) => props.error ? 'block' : 'none' }
});

export default function StyledComponents() {
  return <MyButton>Styled Components</MyButton>;
}

我可以在不重新渲染组件的情况下更新 Material-UI 中的样式吗？

Can I update styles in Material-UI without component rerendering?

styles

reactjs

material-ui

display