时间戳

首页 > 解决方案 > 相同顺序的类名产生不同的结果（Chrome、Webpack 3、CSS 模块）

javascript - 相同顺序的类名产生不同的结果（Chrome、Webpack 3、CSS 模块）

问题描述

我真的很抱歉我不能在 CodePen 中产生相同的行为。

我只有截图和代码，这里是：

第 1 页中的按钮

<button class="Button__big___1_wGL Button__primary-inverse____49cG Button__button___Qt92K Button__button___1bkj2" type="button">
  <span>確定</span>
</button>

第 2 页中的按钮

<button class="Button__big___1_wGL Button__primary-inverse____49cG Button__button___Qt92K Button__button___1bkj2" type="button">
  發送密碼重設信
</button>

类名都是一样的：

Button__big___1_wGL Button__primary-inverse____49cG Button__button___Qt92K Button__button___1bkj2

但这里有区别

在此处输入图像描述

我正在使用 CSS 模块、Webpack 3、React 和 Google Chrome。

我无法重现该问题，因为我的本地开发设置非常复杂。

是否有可能在 CSS 世界中，完全相同的订单类名会产生不同的结果？

标签： javascripthtmlcssreactjs

解决方案

是否有可能在 CSS 世界中，完全相同的订单类名会产生不同的结果？

类的顺序并不重要。样式表的顺序很重要。例如，您.foo { color: green }在styles.css和.foo { color: orange } main.css

<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="main.css" rel="stylesheet" type="text/css"/>

和 HTML：

<p class="foo">Footest</p>

然后文本的颜色将是橙色。随着浏览器加载并应用最后加载的样式表（<link href="main.css" rel="stylesheet" type="text/css"/>）。

推荐阅读