How to add a className to a child element with Material UI TextField

Question

I am using a third party library that records user behavior, but there are things we do not want to record like anything with personally identifiable information. The way it ignores these elements is by added a class the element that should be ignored.

We are using material UI, and when I add className="no-mouseflow" to a TextField it adds it to the parent div in the attached screenshot. The problem is I want to record if there is an error on the input and that is also inside of the div. How can I add a class to just the input?

Answer 1

The inputProps prop of TextField provides attributes applied to the input element.

So to add "no-mouseflow" class to the input, you would do:

<TextField inputProps={{ className: "no-mouseflow" }} variant="outlined" />