Applying CSS by Component's displayName?

Question

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 1

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.