小编mat*_*lev的帖子

我正在包装 Material-UI 的芯片组件，以便我可以为道具传递“主要”和“次要”以外的值colors。如果芯片可点击，我还想保持悬停效果，以便当光标位于芯片上方时芯片会转换为不同的颜色。颜色作为 props 传入，因此设置backgroundColor和很容易color：

<Chip
  style={{
    backgroundColor: props.backgroundColor,
    color: props.color
  }}
/> 

但是，由于我还想将悬停颜色作为道具传递，因此我需要执行以下操作：

<Chip
  style={{
    backgroundColor: props.backgroundColor,
    color: props.color,
    '&:hover': {
      backgroundColor: props.hoverBackgroundColor,
      color: props.hoverColor
    }
  }}
/> 

但是，&:hover（据我所知）不能在style道具内部使用。通常，&:hover将在传递到 的样式对象内部使用withStyles，但我无法从那里访问道具。有什么建议么？

当使用 Material-UI 的 Modal 组件（或使用它构建的任何组件）时，使用openprop 与有条件渲染组件相比有什么好处吗？我注意到你失去了很好的结束过渡，但是如果有很多模态框，会有任何性能优势吗？

使用道具的示例open：

    const [openModal, setOpenModal] = React.useState(false);

    return (
        /* code to set openModal to true */
        <Modal open={openModal} onClose={() => setOpenModal(false)}>modal stuff here...</Modal>
    );

使用条件渲染的示例：

    const [openModal, setOpenModal] = React.useState(false);

    return (
        /* code to set openModal to true */
        {
            openModal &&
                <Modal open onClose={() => setOpenModal(false)}>modal stuff here...</Modal>
        }
    );