Overwriting the not-allowed cursor on disabled components

I am trying to use the “normal” cursor, ie “auto”, when users are hovering over a disabled component, as the css already shows the component as greyed out.

1. <button>Regular button</button> ; 2. <button disabled>Disabled, default cursor</button> ; 3. <button class=not-allowed disabled>Disabled, not allowed</button>.

The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element. The cursor setting should inform ...

The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.

Material-ui library sets pointer-events: none; on disabled buttons which has the side effect of not allowing the cursor property to be set.

The point is to enhance the native Boostrap style for disabled elements by adding the cursor style and enabling the pointer-events.

You need to remove pointer-events: none, that prevents cursor: not-allowed from showing correctly.

Utilities for controlling the cursor style when hovering over an element.

The cursor property specifies the mouse cursor to be displayed when pointing over an element. Default value: auto. Inherited: yes. Animatable: no. Read about ...

... cursor on a disabled HTML button to a not allowed mouse cursor. The cursor property in CSS controls what the mouse cursor will look like ...