Ali Elkhateeb
Ali Elkhateeb

Reputation: 3703

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

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?

Upvotes: 8

Views: 9149

Answers (3)

Pessi S.
Pessi S.

Reputation: 83

You can use editable MUI Typography,

like the example in this stackoverflow Question: see here

then wrap it with from react-mark

const [search,setSearch]=useState('abc');

return ( <Marker mark={search}>
        <Typography contentEditable={true} suppressContentEditableWarning={true} gutterBottom variant="h5" component="h2">
          {title}
        </Typography>
 </Marker>)

The search text will be marked, and the typography is editable.

Hope it help some one!

Upvotes: 0

siddhartha kasaraneni
siddhartha kasaraneni

Reputation: 688

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"

Upvotes: 1

HiRenS
HiRenS

Reputation: 87

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

Upvotes: 0

Related Questions