Applying CSS by Component’s displayName?

Calling all experts!

I am trying to add a class to disable all element’s descendants to be read only, the style is fine, but it doesn’t applied to all descendants nor any:

#ComponentDisplayName * {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    pointer-events: none;
}

The element is a component that I want to have the above style by displayName as div id, like so:

import * as readOnly from './Permission.scss';

<div
    id={component.type.displayName}
    className={readOnly[component.type.displayName]}
>
    {React.createElement(component, {
        ...component.className
    })}
</div>

The output HTML:

The final result should show the component has the style cascade to all its children.

Is that even possible?

Thanks in advance to all of the participants.

Answer

It seems that I don’t need to use id attribute after all. It is sufficient to define class rule as the displayName:

.ComponentDisplayName * {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    pointer-events: none;
}

Then you can pick the style with the component’s displayName as follow:

import * as readOnly from './Permission.scss';

<div className={readOnly[component.type.displayName]}>
    {React.createElement(component, {
        ...component.className
    })}
</div>

Finally, the styles will apply to all descendant elements of the component.