【发布时间】：2019-04-28 09:56:45
【问题描述】：
我使用样式化组件作为我的 React 应用程序的 CSS 替代品。在开发中一切正常（第一个屏幕截图），但是当我运行生产构建（npm build）时，样式标签中的样式被剥离（第二个屏幕截图）。因此，生产版本中没有样式。
这里是生产版本：http://projects.loratadin.com.s3-website-us-east-1.amazonaws.com/weather-app/
【问题讨论】：
【发布时间】：2019-04-28 09:56:45
【问题描述】：
我在生产中遇到了类似的空样式标签问题。我正在使用无头浏览器进行服务器端渲染，这个问题导致服务器端渲染的页面在加载 JS 资产之前显示为没有样式。
找了好久，终于找到原因了。 Styled Components 库使用称为“快速模式”的东西在生产中注入样式。这使得样式绕过 DOM` 并直接注入到 CSSOM 中，因此，出现在检查器中，但在 DOM 上完全不可见。
幸运的是，Styled Components 4.1.0 修复了这个问题！现在，您可以将名为 SC_DISABLE_SPEEDY 的全局变量设置为 true 以禁用 Speedy mode 并使样式也出现在生产中。请记住，您应该在应用程序入口文件的最开始处执行此操作，然后再导入任何样式化的组件，否则将无法正常工作。
我这样做的方法是创建一个名为globals.js 的新文件，其中包含global.SC_DISABLE_SPEEDY = true
，并将其作为我的index.js 中的第一件事导入。
【讨论】：
-
您知道如何在 Create-React-App 中禁用 Speedy 模式，因为我确实尝试了您的解决方案，但 Speedy 模式似乎仍然处于活动状态且无法正常工作。
-
@AJ- 我使用 cra，你只需要在你的根目录中创建一个 .env 文件并添加 REACT_APP_SC_DISABLE_SPEEDY=true
-
谢谢你的回答，伙计！对于那些点击它的人，我发现这非常有用：github.com/styled-components/styled-components/blob/master/…
-
很生气，官方文档中没有明确记录这一点！
-
似乎是 IMO 的错误建议。您正在禁用主要优化以涵盖边缘情况。最好弄清楚需要样式的组件来识别样式。至少这就是我想要做的......在我的情况下，样式名称是动态的，我认为这就是它们被删除的原因
我能够复制您的问题，并且看起来当应用程序处于生产状态时，它无法选择样式组件中的 html 元素（样式不适用于元素）。相反，您需要为input 和button 创建额外的风格化组件。
工作示例：https://github.com/mattcarlotta/Weather-App
我重构了您的应用程序以简化其结构。请阅读README 以获取有关如何在开发和生产中运行它的说明（请勿将上述存储库用于生产，因为非常没有必要拥有express 后端——我这样做只是为了让您可以运行本地生产版本）。
我改变了什么：
- 将所有
styled组件移至components文件夹以实现模块化 - 任何类型的全局样式都被放入
styles文件夹中 - 将
assets移动到images并将它们导入到需要它们的styled组件中（无需使用require('../path/to/image')） - 简化了
App.js文件。儿童由state和班级methods控制。最重要的是，将你的form变成controlled component，将getWeather方法修复为：不允许空提交，如果AJAX调用失败，它会catch错误（而不是破坏你的应用程序)，并在成功提交时重置表单输入。 - 添加了
prop-types以确保props在声明中保持一致（字符串仍然是字符串，数字仍然是数字，等等）。
【讨论】：
-
感谢您，Matt，您的工作和解决问题，我从您的回答中学到了很多东西。感谢您的时间！
-
我挖得更深了，看起来它没有集成到 v3.x 中（您使用的是 v3.3.2）。如果您更新到 v4.1.1，它将按预期工作。工作示例：github.com/mattcarlotta/Styled-Components-Example（尽管我仍然推荐可重用的样式组件或至少在 html 元素选择器上指定的 className 选择器：styled-components.com/docs/… - 参见第三个示例）
对于创建 React App 的人，您可以在根目录中添加一个 .env 文件并添加：
REACT_APP_SC_DISABLE_SPEEDY=true
【讨论】：