使用 styled-components 的 createGlobalStyle() 从文件创建全局样式答案

【问题标题】：Creating a global style from a file using styled-components' createGlobalStyle()使用 styled-components 的 createGlobalStyle() 从文件创建全局样式
【发布时间】：2021-03-09 23:01:48
【问题描述】：

我目前正在尝试在我的 React 应用程序中结合 styled-components 和 react-bootstrap。我想使用 react-bootstrap 附带的全局样式表，我目前正在使用 import "bootstrap/dist/css/bootstrap.min.css";。

文档确实有一些示例，我想我了解如何创建全局样式的基本思想。但是，样式组件希望我导入全局样式表的方式似乎是在文件的 CSS 上调用 createGlobalStyle()，但我看到的每个示例都是在模板字符串上调用函数。我在这里唯一的选择真的是将整个 CSS 文件作为字符串读取并将其输入createGlobalStyle 吗？

【问题讨论】：

标签： javascript css reactjs styled-components

【解决方案1】：

更多的挖掘已经产生了答案。开发控制台内的 createGlobalStyle 生成的警告如下：

GlobalStyle.js:28 此时请不要在 createGlobalStyle 中使用 @import CSS 语法，因为我们在生产中使用的 CSSOM API 不能很好地处理它。相反，我们建议使用 react-helmet 之类的库将典型的元标记注入样式表，或者简单地将其手动嵌入到 index.html 部分以获得更简单的应用程序。

似乎导入 css 文件的正确方法是简单地将其添加到头盔中。

【讨论】：