React.js：生产构建中的类名 CSS 看起来与开发中的不同

Question

这可能已经在某个地方得到了回答，所以我很抱歉，但我找不到更新版本的 React 的解决方案，这让我很困惑。

我正在运行最新版本的 React，并且正在为我的应用创建一个注册页面。我有一个使用import "./RegistrationPage.css" 导入的CSS 文件，并且还尝试使用import registrationCSS from "./RegistrationPage.css"。每个输入也有一个唯一的 id。

我正在使用 AWS Amplify 部署我的应用程序，我的问题是我的开发构建和生产构建之间的 CSS 不同。在我的本地主机上，id css 正确地影响了我的页面，但 className css 部分工作，但是当我查看我部署的页面时，所有 className css 看起来都与 dev 中的不同。这是一个大问题，因为在部署之前我永远不知道我的应用会是什么样子。

我以 2 张图片为例。

生产构建

开发构建

有什么办法解决这个问题？

谢谢。

编辑：如果我要删除或更改它，我注意到 class css 属性会对其产生一些影响，但这不应该影响它从 dev 到 prod 构建，我无法想象，然后它甚至会受到影响部署时不同（图像中显示的字体/填充/等）。我也多次检查了我所有的 css 文件，并没有注意到我认为可能会影响它的任何其他属性。包装器 css 属性的功能似乎也有所不同。

RegistrationPage.js

<Col className="registrationWrapperInfo">
   <div>
      <InputGroup>
         <Input id="regGlow" className="registrationInputBoxes" 
           type="password" value={passwordCheck}
           placeholder="Password..." onChange={(e) => 
           setPasswordCheck(e.target.value)}/>
      </InputGroup>
   </div>
</Col>

RegistrationPage.css

.registrationInputBoxes {
    width: 100%;
    height: 100%;
    margin: 5px;
    font-weight: bolder;
}

#regGlow:focus {
    outline: none;
    box-shadow: 0 0 10px #f069ca;
    border: 2px solid #f069ca;
}

.registrationWrapperInfo {
    min-width: 300px;
    max-height: 500px;
    border-radius: 20px;
    background: rgba(0,0,0,0.65);
    box-sizing: border-box;
    padding: 30px;
    color: #fff;
    margin-top: 50px;
    margin-right: 30px;
    margin-left: 30px;
}

Answer 1

我在这个项目中使用了 Reactstrap，我刚刚想到它可能会覆盖我的类更改，事实证明确实如此。我的问题的简单解决方法是将我的引导导入移到我的 index.js 文件中的 index.css 导入之上。

Answer 2

我遇到了类似的问题。首先，我有损坏的 CSS 文件，不允许我构建应用程序。其次，显然很难从 jsx 文件编译多个导入的 css 文件，为了解决这个问题，我从所有 jsx 文件中删除了所有导入，并在 index.js（less 和 css 文件）中导入了一次。第三，在您保存样式的文件夹中，我删除了所有样式子文件夹，将所有样式文件留在一个样式文件夹中。这解决了我的问题，希望对您有所帮助。