DEV Community

Discussion on: How are you using Styled Components?

Collapse
 
marcelxsilva profile image
Marcelo Silva

here you can use, an helper to destructuring props styling.

I use, an helper called getTheme with get from lodash.

export const getTheme = (themeProp: string) => ({ theme }: any): string => get(theme, themeProp);
Enter fullscreen mode Exit fullscreen mode

and can access this value getTheme('backgroundSecondary')

const backgroundSecondary = getTheme('backgroundSecondary')

background-color: ${backgroundSecondary}
Enter fullscreen mode Exit fullscreen mode

In index.js or index.ts of project you can use ThemeProvider from styled-components:

const theme = {
  ...colors,
  ...spacings,
  ...radius,
  ...breakpoints,
};

<ThemeProvider theme={theme}>
...
</ThemeProvider>
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
larsejaas profile image
Lars Ejaas

Hmm, I really love this. However, I tried it and couldn't make it work. Do you need a workaround when using several different themes? I am unsure how this would work?

Thread Thread
 
marcelxsilva profile image
Marcelo Silva

it is necessary to have the ThemeProvider configured at the root of the project. I usually use the routes file as children of the ThemeProvider.

when dealing with different themes, it will depend a lot on how you will inject the settings

Thread Thread
 
larsejaas profile image
Lars Ejaas

Yeah, that makes sense! But I need to do some rework on the way I implement themes in styled components. Would like to optimize my workflow further, and your idea using lodash is really great, I defininitely need to include this!