CODEWITHSUNDEEP
styled-components
lomine
lomine

Reputation: 1181

Styled Components, createGlobalStyle from multiple files

I'm using styled components and the createGlobalStyles to create global styles.

I want to have the styles in the createGlobalStyles to come from different styled component files and then have one file to create the createGlobalStyle. I'm havoing problems including the separate styled components into one file to create the creatGlobalStyle.

Here is a simpified example

//fonts.ts
export const Fonts = `
    h1, h2, h3, h4, h5{
        color: #aaa;
    }
`

=

//fontFamily.ts
export const FontFamily = `
    h1, h2, h3, h4, h5{
        font-family: Arial;
    }
`

=

//globalStyle.ts
import {createGlobalStyle} from 'styled-components';

import {Fonts} from './fonts'

import {Fonts} from './fontFamily'

export default createGlobalStyle`
   Fonts
   Fonts
`

How can I include the styles from the separate files in the createGlobalStyle

Upvotes: 1

Views: 3180

Answers (2)

Gavin Hughes
Gavin Hughes

Reputation: 31

If you have a lot of global styles like we did, you can use styled-components css method to leverage styled-components (css) IDE syntax highlighting & linting you can also do the following:

import React from 'react'
import { createGlobalStyle, css } from 'styled-components'

const Reset = css`
  * {
    box-sizing: border-box;
  }
`

const Accessibility = css`
  .hidden {
    display: none !important;
    visibility: hidden;
  }
`

const BaseStyles = createGlobalStyle`
  ${Reset};
  ${Accessibility};
`

export const GlobalStyles = () => (
  <>
    <BaseStyles />
  </>
)

Import GlobalStyles and render as sibling to {children}

Upvotes: 1

Luis Paulo Pinto
Luis Paulo Pinto

Reputation: 6036

You can do it this way:

import { createGlobalStyle } from "styled-components";

import { Fonts } from "./fonts";
import { FontFamily } from "./fontFamily";

const GlobalStyle = createGlobalStyle`
  ${Fonts}
  ${FontFamily}
`;

Upvotes: 4

Related Questions