score:1

Accepted answer

use inputcomponent inside inputprops to achieve customized text field inside the textfield

inputprops={{
  inputcomponent: () => (
    <div style={{ color: "yellow" }}>xxxxxxxxxxxxxxxxx</div>
  )
}}

enter image description here


try it online:

edit funny-curran-yw54t

score:1

you don't have to do use div's inside value attribute. you want the text to be styled, use inputprops

import react from "react";
import textfield from "@material-ui/core/textfield";

export default function app() {
  return (
    <>
      <textfield
        id="outlined-multiline-static"
        fullwidth
        rows="12"
        value="hi"
        variant="outlined"
        inputprops={{
          style: {
            color: "yellow"
          }
        }}
      />
    </>
  );
}

Related Query

More Query from same tag