javascript - Material-ui TextField dom元素如何自定义

Question

我尝试了下面的代码，虽然我期待得到一个黄色的嗨，但我得到了[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

标签： javascripthtmlcssreactjsmaterial-ui

Answer 1

您不必使用 div 的内部值属性。您希望文本样式化，使用 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"
          }
        }}
      />
    </>
  );
}