How to give Typography-like style to an input element with Material-ui?

i found a workaround for you, but keep in mind that this is not ideal because of you change the current Typography component u have to find its classes again on the chrome devtools, and also the typography with the diaplay 'none' is nesecary for material to render the styles...

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