Necesito un ejemplo de Colapso. por favor, muéstrame un colapso de interfaz de usuario de material simple.
<Button color="primary" startIcon={<LocalGroceryStoreOutlined />}> Credit charge</Button> <Collapse >test</Collapse> const { useState } = React; const { Button, Collapse, colors, CssBaseline, ThemeProvider, Typography, Container, createTheme, Box, SvgIcon, Link, } = MaterialUI; const Credit = (props) => { const {id} = props; const [open, setOpen] = useState(false); return ( <div className="my-4"> <div> <Button color="primary" onClick={() => setOpen(state => !open)}> click me</Button> </div> <div> <Collapse in={open}>test</Collapse> </div> </div> ); }; ReactDOM.render(<Credit />, document.getElementById("root")); <body> <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js" crossOrigin="anonymous"></script> <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossOrigin="anonymous"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> </body>