Material-UI TextField DOM элемент, как настроить

Question

Я попробовал приведенный ниже код, и в то время как я ожидал получить yellowi sh Привет, вместо этого я получил [object Object].

Есть ли способ исправить это? возможно, использование InputProps помогает, но, к сожалению, я не смог найти подробное руководство по этому вопросу.

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

Редактировать: я просто упростил задачу и не хочу, чтобы весь текст был желтым.

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

Answer 1

Используйте inputComponent внутри InputProps, чтобы получить настраиваемое текстовое поле внутри TextField

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

---

Попробуйте онлайн:

Answer 2

Вам не нужно использовать атрибут div внутри value . Вы хотите, чтобы текст был стилизован, используйте 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"
          }
        }}
      />
    </>
  );
}