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

user_7021694 0
Viewed 3847

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

Something like this

enter image description here

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

How can I achieve that?

material-ui reactjs
2 Answers

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

HTML in the input field value

user_75759950

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"

user_77105000
Related