Material-ui TextField dom元素如何自定义 [英] Material-ui TextField dom element how to customize

问题描述

我尝试了下面的代码，而当我希望得到淡黄色的Hi时，我却得到了 [object Object] .

有没有办法解决?也许使用 InputProps 会有所帮助，但不幸的是，我找不到有关它的任何详细教程.

 < TextFieldid ="outlined-multiline-static"label =多行"多行全屏宽度行="22"值= {< div>< div style = {{color:"yellow"}}> There</div></div>}variant ="outlined"/> 

我只是简化了问题，不希望整个文本都是黄色的.

---

在线尝试:

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

解决方案

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

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

---

Try it online:

这篇关于Material-ui TextField dom元素如何自定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！