javascript - 通过组件的 displayName 应用 CSS？

Question

召集所有专家！

我正在尝试添加一个类来禁用所有元素的后代只读，样式很好，但它不适用于所有后代或任何后代：

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

该元素是我希望通过idcomponent具有上述样式的元素，displayName如下所示：div

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

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

输出 HTML：

最终结果应该显示该组件具有对其所有子级的样式级联。

这甚至可能吗？

提前感谢所有参与者。

标签： javascripthtmlcssreactjscss-selectors

Answer 1

看来我毕竟不需要使用 id 属性。将类规则定义为displayName：

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

然后你可以选择组件的样式displayName如下：

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

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

最后，样式将应用于组件的所有后代元素。