Materialii 纸 api 带关闭按钮

Question

我正在实施来自 Material UI 的论文：https://mui.com/components/paper/

这是我目前编写的代码：

<Paper className="modal" elevation={3}>
    {..Content..}
</Paper>

当前的 UI 使它打开一个特殊的窗格，只有当我点击它以外的区域时它才会关闭。我想添加一个关闭按钮来关闭论文。是否可以在其上添加自定义 onClose 操作？

编辑：这是我复制的一个codesandbox：https://codesandbox.io/s/black-surf-r1yz87?file=/src/App.js

Answer 1

纸张只是渲染组件的表面，它不支持任何功能。对于此用例，state 变量可用于隐藏和取消隐藏 Paper 组件。您可以将其设为可重用组件。

const [shouldShowPaper, setShouldShowPaper] = useState(true);
 ...
{
    shouldShowPaper && 
    <Paper elevation={props.elevation} style={{position: "relative"}}>
        <button 
            style={{position:"absolute", top: "10px", right: "10px"}}
            onClick={() => setShouldShowPaper(false)}
        >
            X
        </button>
        {props.children}
    </Paper>
}

您可以切换类以显示过渡，而不是突然移除纸张组件。

Materialii 纸 api 带关闭按钮

Materialiui Paper api with close button

javascript

typescript

reactjs

material-ui