Are you a CSS pro?
I'm attempting to apply a class that will make all descendants of an element read-only, but for some reason the style isn't being applied as expected:
#ComponentDisplayName * {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
pointer-events: none;
}
The element is a component and I want it to have the above style based on its displayName, like this:
import * as readOnly from './Permission.scss';
<div
id={component.type.displayName}
className={readOnly[component.type.displayName]}
>
{React.createElement(component, {
...component.className
})}
</div>
The resulting HTML looks like this:
https://i.sstatic.net/7dYYj.png
My goal is to make sure the component and all its children have this style. Is this even possible?
Thanks in advance to everyone helping out.