如何使用Material-ui为输入元素赋予类似版式的样式？

问题描述

我希望自己的Typography字段可以编辑，因此我将其转换为输入。
现在，我希望此输入具有相同的样式。
怎么做？
我尝试将生成的CSS复制到输入中，但这很乏味，而且似乎并不完美。

下面是一个代码沙箱，用于说明：https://codesandbox.io/s/flamboyant-stonebraker-le1eq?file=/index.js

解决方法

我为您找到了解决方法，但是请记住，这不是理想的选择，因为您更改了当前的Typography组件，因此您必须在chrome devtools上再次找到其类，并且带有diaplay'none'的字体是必要的材料来呈现样式...

import React from "react";
import ReactDOM from "react-dom";
import { Button,InputBase,TextField,Typography } from "@material-ui/core";

function App() {
 const [isEditing,setIsEditing] = React.useState(false);
 const [value,setValue] = React.useState("Edit me");

 const toggleIsEditing = () => setIsEditing((b) => !b);

 if (isEditing) {
   return (
     <div style={{ display: "flex",alignItems: "center" }}>
       <input
         className="MuiTypography-root MuiTypography-h4 MuiTypography-displayInline"
         value={value}
         onChange={(e) => setValue(e.target.value)}
       />
       <Typography style={{ display: "none" }} />
        <Button size="small" onClick={toggleIsEditing}>
          Done
        </Button>
       </div>
    );
  }

  return (
   <div style={{ display: "flex",alignItems: "center" }}>
      <Typography variant="h4" display="inline">
        {value}
      </Typography>
      <Button size="small" onClick={toggleIsEditing}>
        Edit
      </Button>
    </div>
  );
}

ReactDOM.render(<App />,document.querySelector("#app"));