CODEWITHSUNDEEP
javascriptreactjsstyled-components
ueeieiie
ueeieiie

Reputation: 1562

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

I figured I need to use injectGlobal more than once.

I remember reading in the docs about not using this method more than once in my app.

I have a /globalStyles folder which supposes to collect few different modules into one index.jsx and export 1 injectGlobal style in the end.

My Question

In my case right now I have:

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

How do I export those modules so I could inject them into 1 injectGlobal?

I know I can save them in variables as string literal, and just add them as variables into injectGlobal, but then I won't have the intellisense and coloring styled-components gives.

I'm looking for the best practice if there is one.

Upvotes: 0

Views: 174

Answers (1)

Jacob Gillespie
Jacob Gillespie

Reputation: 4081

You can compose the styles with Styled Component's css template literal, which should preserve editor intellisense:

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}
`

Basically the return value of the css template literal is also valid in an interpolation. Taking a look at the TypeScript types, the things that can appear in an interpolation are:

  • a string
  • a number
  • a falsy value (undefined, null, false)
  • Styles (what css returns)
  • a StyledComponentClass (a styled component)

Upvotes: 1

Related Questions