I'm using styled ponents in my app. I wanna make a global style sheet to hold all my color variables. The API Docs remend something like this

import { createGlobalStyle } from 'styled-ponents'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
  }
`

but i have a list of colors like this

export const COLORS = {
  navy: "#2F374B",
  green: "#1EB88D",
  white: "#FFFFFF",
  grey: "#222A3E",
  primary5: "#F4FBF9",
  danger: "#F13F4A",
};

and i dont think the body field can accept 'colors' or list of colors as a key. Any advice for setting this up?

Thanks in advance

I'm using styled ponents in my app. I wanna make a global style sheet to hold all my color variables. The API Docs remend something like this

import { createGlobalStyle } from 'styled-ponents'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
  }
`

but i have a list of colors like this

export const COLORS = {
  navy: "#2F374B",
  green: "#1EB88D",
  white: "#FFFFFF",
  grey: "#222A3E",
  primary5: "#F4FBF9",
  danger: "#F13F4A",
};

and i dont think the body field can accept 'colors' or list of colors as a key. Any advice for setting this up?

Thanks in advance

• javascript
• css
• reactjs
• styled-ponents
• styling

Share Improve this question Follow asked Feb 2, 2022 at 21:23 user64209user64209 10722 silver badges88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Check out https://styled-ponents./docs/advanced#theming

You can use a theme provider and pass reusable properties there.

import { ThemeProvider } from 'styled-ponents'
import { COLORS } from './wherever'
const theme = {
  colors: COLORS
}

function App() {
  return <ThemeProvider theme={theme}><MainAppCode /></ThemeProvider>
}

When styling a ponent you can access the theme object as a prop:

const Button = styled.button`
  /* Color the border and text with theme */
  color: ${props => props.theme.colors.green};
`;

Anywhere you pass a function in the styled ponent template strings, the argument you get will be props, which contains your theme object.