将"global styles"收集到索引文件中的推荐方法是什么？

Question

我想我需要多次使用injectGlobal。

我记得在文档中读到有关在我的应用程序中不要多次使用此方法的信息。

我有一个 /globalStyles 文件夹，它假设将几个不同的模块收集到一个 index.jsx 中，最后导出 1 个injectGlobal样式。

我的问题

就我而言，我现在有：

1. global.style.jsx
2. reset.style.jsx

如何导出这些模块，以便将它们注入 1 injectGlobal？

我知道我可以将它们作为字符串文字保存在变量中，然后将它们作为变量添加到injectGlobal中，但是这样我就不会有样式组件提供的智能感和着色。

如果有的话，我正在寻找最佳实践。

Answer 1

您可以使用

样式化组件的css模板文本来组合样式，这应该保留编辑器智能：

reset.style.jsx

import {css} from 'styled-components'
export default css`
  // reset styles
`

global.style.jsx

import {css} from 'styled-components'
export default css`
  // global styles
`

样式.jsx

import {injectGlobal} from 'styled-components'
import resetStyles from './reset.style'
import globalStyles from './global.style'
injectGlobal`
  ${resetStyles}
  ${globalStyles}
`

基本上，css模板文本的返回值在插值中也是有效的。 看看 TypeScript 类型，插值中可能出现的内容是：

• 一个字符串
• 一个数字
• 错误值(未定义、空值、假(
• 样式(css返回的内容(
• a StyledComponentClass (一个样式化组件(