I have a Material UI Card with an image and several <Typography> children. I need to allow the user to edit the image URL and the text in the children. What's the best way to do it without changing the overall size of the card or the size of any of its children during the editing? Is there an existing example I can use?
Seamlessly switch between a text element and a text input in Material UI
Asked Answered
Consider using contentEditable
<Typography contentEditable={true} suppressContentEditableWarning={true}>
const useStyles = makeStyles({
root: {
maxWidth: 300,
margin: "auto",
marginBottom: "10px"
},
media: {
height: 60
},
});
function App() {
return (
<SampleCard
title="Click me to edit"
description="description"
image="https://via.placeholder.com/300x60"
/>
)
}
function SampleCard({title, description, image}){
const classes = useStyles();
return(
<Card classes={{root: classes.root}}>
<CardMedia
classes={{media: classes.media}}
component="img"
image={image}
title={title}
/>
<CardContent>
<Typography contentEditable={true} suppressContentEditableWarning={true} gutterBottom variant="h5" component="h2">
{title}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
{description}
</Typography>
</CardContent>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
);
}
ReactDOM.render(<App/>, document.getElementById("root"));<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
<script type="text/babel">
const { Button, Card, CardMedia, CardContent, Typography, CardActions, makeStyles } = MaterialUI;
</script>
</body>© 2022 - 2024 — McMap. All rights reserved.