在 Material UI 中的文本元素和文本输入之间无缝切换

Question

我有一张 Material UI Card 和一张图片以及几张 <Typography> children。我需要允许用户编辑图像 URL 和 children 中的文本。在编辑过程中不更改卡片的整体大小或其任何 children 的大小的最佳方法是什么？有我可以使用的现有示例吗？

Answer 1

考虑使用 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>

在 Material UI 中的文本元素和文本输入之间无缝切换

Seamlessly switch between a text element and a text input in Material UI

typography

textfield

reactjs

material-ui