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

Question

我认为我需要多次使用 injectGlobal。

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

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

我的问题

就我而言，现在我有：

global.style.jsx
reset.style.jsx

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

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

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

Answer 1

您可以使用 Styled Component 的 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
`

style.jsx

import {injectGlobal} from 'styled-components'

import resetStyles from './reset.style'
import globalStyles from './global.style'

injectGlobal`
  ${resetStyles}
  ${globalStyles}
`

基本上 css 模板文字的 return 值在插值中也是有效的。看一下 TypeScript 类型，可以出现在插值中的是：

一个字符串
一个数
虚假值（未定义、空、假）
样式（什么 css returns）
一个 StyledComponentClass（一个有样式的组件）

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

What would be the recommended way to collect "global styles" into an index file?

javascript

reactjs

styled-components

我的问题