Search code examples
javascriptreactjsmaterial-uipointer-events

pointer-events: none does not work on material-ui textField input

I've got a material-ui textField input, and I'm setting the css on it to pointer-events: none, but this does not prevent the user from entering text in the input.

I know I can add a disabled={true} flag but if I can do this with CSS it would be much simpler - instead of adding more logic, checking for props etc - I can just disable it based on a parent class.

How do you use pointer-events: none with a materialUI textField input?

Solution

  • Setting the disabled attribute on inputs is the correct method of disabling the input. pointer-events: none is typically used on SVG images to suppress click events.