前缀 css 选择器，用于使 API 安全的样式答案

【问题标题】：Prefix css selectors for make styles from API safe前缀 css 选择器，用于使 API 安全的样式
【发布时间】：2020-08-17 09:01:44
【问题描述】：

假设用户可以在管理面板中为每个组件添加样式，并且我在我的节点服务器中将其作为字符串获取：

const stylesFromAPI = ".p { color: red } .bg { background: lime }";

如何在追加到我的文档之前为这些样式添加前缀以避免冲突？我需要 CSS 模块之类的东西，但需要使用字符串（不是作为模块加载器）：

const stylesFromAPI = css(".p { color: red } .bg { background: lime }"); // returns hashedClassname685946898456
<SomeCompontent className={stylesFromAPI} />

产生：

<style>
  .hashedClassname685946898456 .p { color: red }
  .hashedClassname685946898456 .bg { background: lime }
</style>
<div class="hashedClassname685946898456"></div>

【问题讨论】：

标签： css reactjs css-selectors css-modules react-css-modules

【解决方案1】：

Shadow DOM 在这里似乎是一个合理的选择。您可以在 shadow DOM 内部创建样式标签，而无需处理任何选择器前缀。例如，使用react-shadow 包：

import root from 'react-shadow';

然后在 JSX 中，类似：

<root.div>
    <style type="text/css">
        {/* CSS string here */}
    </style>
    <div>
        {/* Stuff here */}
    </div>
</root.div>

在这里查看一个工作示例：https://github.com/joshdavenport/stack-overflow-61566764-react-css-shadow-dom

这里的主要缺点是您在 shadow DOM 之外的样式将不适用。那些为组件使用 shadow DOM 的人认为这是一件好事，simply trying to scope CSS do not。不确定您的范围是什么，所以我无法确定这对您来说是否是个问题。

如果是这样，您可以在 shadow DOM 中重新导入您的样式，但如果不知道正在使用什么捆绑器以及它是如何使用的，我无法真正指出如何做到这一点。

或者，您可以使用 css 包拆分导入的 CSS，使用随机生成的类遍历所有前缀的选择器，然后重新 stringify。

【讨论】：