How can I highlight part of the text in material-ui TextField

Question

I want to Highlight not Select part of the value in TextField component

Something like this

I tried having a <span> with a class in the value prop but that showed [object Object] instead.

How can I achieve that?

See https://stackoverflow.com/questions/3121683/is-there-a-way-to-style-part-of-an-input-fields-value — Ryan Cogswell, Oct 18 '19 at 11:31

score 1 · Answer 1 · answered Oct 18 '19 at 09:09

1

Material UI Textfield component is basically made up of a html input component.

the Textfield "value" prop will be reflected as html input element's value

answered Oct 18 '19 at 09:09

HiRenS

So does this mean there is no way to highlight part of the TextField value? – Ali Elkhateeb Oct 18 '19 at 09:27
2

I have used reach text editor components to show formatting text, But i dont know if it fits your use case – HiRenS Oct 18 '19 at 12:18

score 0 · Answer 2 · edited Oct 20 '20 at 21:52

0

Yes, it is possible to highlight, but we need to pre-parse the text in to html,

Warning!! Must be careful about the source of the text.

npm install html-react-parser

var parse = require('html-react-parser');
<Typography > {parse(props.text)}</Typography>

Example: props.text = "This should render your html"

edited Oct 20 '20 at 21:52

Dharman

answered Oct 20 '20 at 21:46

How is this helping? You do not talk about TextFields nor inputs, and we don't want to parse HTML here, we want to highlight a part of the text in a Mui TextField. – Sereyn Mar 14 '22 at 10:34

2 Answers2