如何轻松地交换 CSS (LESS) 主题即从浅色到深色主题，而无需添加选择器特异性来阻止我的样式覆盖？

问题描述

我有一个容器 Div <div class="pageContainer">。在里面，我有几个带有专门 CSS 的“页面”。

<div class="pageContainer">
  <div class="pageView">
  <div class="pageView">
   ...
  <div class="pageView">
</div>

我有一个 .less 文件，其中包含使 pageView 工作的所有各种花哨样式：

\\pageView.less
.pageView a {...}
.pageView .item {...}
...

我们还允许用户在文本框中输入自定义样式。所以用户可能会输入：

.pageView .myCustomDiv {...}

现在，我想添加几个不同版本的 .pageView。例如，“夜间模式”或“大字体”模式。我想出的当前解决方案是为每个文件创建一个单独的 .less 文件，但在它前面加上一个包含类，如下所示：

\\pageView_nightMode.less
.nightMode {
  .pageView a {...}
  .pageView .item {...}
}
...

我将这些 .pageView 变体的所有导入到通用 pageView.less 文件中，因此现在我可以添加一个按钮来添加/删除该容器类上的一个类，以变成 <div class="container nightMode"> 并且所有页面都将转换。然而，由于不够特殊和失去 CSS 优先级（或添加 !important 到所有内容，这也是一个麻烦），用户现在已经失去了应用他们自定义样式的能力，而无需预先添加和复制他们自己的 CSS：

.nightMode .pageView .myCustomDiv {...}
.largeFont .pageView .myCustomDiv {...}

问题是，我有几个用户已经创建了这样的文档，我不能合理地让每个人突然停止使用他们的自定义样式。

是否有更好的解决方案允许通过单击按钮交换“基本”CSS（最好存储在单独的 .less 文件中），但仍允许我的用户的现有代码稍后覆盖这些样式？我曾考虑过在渲染之前“劫持”他们的代码并自己添加额外的类，但这似乎比实际需要的更混乱。

如果重要的话，我正在使用 Javascript 和 React.js 来做这件事。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript less reactjs reactjs reactjs reactjs