Material-ui TextField dom element how to customize

问题

I tried below code and while I was expecting to get a yellowish Hi, I got [object Object] instead.

Is there a way to fix it? maybe using InputProps helps but unfortunately I couldn't find any detailed tutorial about it.

<TextField
    id="outlined-multiline-static"
    label="Multiline"
    multiline
    fullWidth
    rows="22"
    value={<div> Hi <div style={{ color: "yellow" }}>There</div></div>}
    variant="outlined"
  />

Edit: I just simplified the problem and don't want the whole of the text to be yellow.

https://codesandbox.io/s/hopeful-bush-gfi9m?fontsize=14&hidenavigation=1&theme=dark

回答1:

Use inputComponent inside InputProps to achieve customized text field inside the TextField

InputProps={{
  inputComponent: () => (
    <div style={{ color: "yellow" }}>XXXXXXXXXXXXXXXXX</div>
  )
}}

---

Try it online:

回答2:

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

来源：https://stackoverflow.com/questions/60739138/material-ui-textfield-dom-element-how-to-customize