Reputation: 3703
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?
Upvotes: 8
Views: 9149
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
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
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
Upvotes: 0