Estoy implementando Paper from Material UI: https://mui.com/components/paper/
Y aquí está el código que he escrito hasta ahora:
<Paper className="modal" elevation={3}> {..Content..} </Paper>La interfaz de usuario actual hace que se abra un panel especial que se cierra solo cuando hago clic en el área exterior. Quiero agregar un botón de cierre para cerrar el Paper. ¿Es posible agregarle una acción onClose personalizada?
Editar: aquí hay un codesandbox que he replicado: https://codesandbox.io/s/black-surf-r1yz87?file=/src/App.js
El papel es solo una superficie para renderizar componentes, no admite ninguna funcionalidad. Para este caso de uso, se puede usar una variable de state para ocultar y mostrar el componente Paper . Puede convertirlo en un componente reutilizable.
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> }Puede alternar las clases para mostrar las transiciones en lugar de la eliminación abrupta del componente de papel.