reactjs - 如何使用 Material-ui 为输入元素提供类似排版的样式？

Question

我希望我的 Typography 字段变得可编辑，因此我将其转换为输入。
现在我希望这个输入具有相同的风格。
怎么做？
我尝试将生成的 css 复制到输入中，但它很乏味而且似乎并不完美。
这是一个代码沙箱来说明:https://codesandbox.io/s/flamboyant-stonebraker-le1eq?file=/index.js

Answer 1

我为您找到了一个解决方法，但请记住，这并不理想，因为您更改了当前的排版组件，您必须在 chrome devtools 上再次找到它的类，而且带有 diaplay 'none' 的排版对于 Material 来说也是必要的渲染样式...

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"));