Migrate to Styled-Components

[yelouafi]

We need this to release monitor's components in a npm package and make the them themables

[zalmoxisus]

I'm a little late to the party, but while Styled-Components are great, I'd opt on using javascript styles via jss or glamor. This way we could use base16 themes, which are js not css. So, we can reuse Redux DevTools themes. Another advantage is that a theme can be inverted to get both light and dark themes (see the demo).

Here's how we compose them with jss styles via react-base16-styling. Not sure how that can be done with styled-components as we have to mix css with javascript styles, unless we convert base16 themes to css.

[yelouafi]

Thanks for your feedback. The main reason I didn't consider style based solutions is because I use some css-only features (@font-face, pseudo selectors). But theme-integration with redux devtools is an important thing for me.

From your links I can see that base16 themes are just objects with props defining color schemes. I'm very new to styled-components but I think it's possible to integrate those themes

const Panel = styled.div`
  backrground-color: ${p => p.theme.base00}
`

cc @mxstbr

[mxstbr]

Yes, very much so! We export a ThemeProvider that accepts an object theme! This will work perfectly:

<ThemeProvider theme={solarized}>
  <App />
</ThemeProvider>

Any component inside App now has access to the theme like so: ${props => props.theme.base00}!

See more info at https://github.com/styled-components/styled-components#theming!

[zalmoxisus]

Sounds great! We also can invert the theme before passing to ThemeProvider.

[zalmoxisus]

Using @erikras' styled-components-theme we can even extend our colour set with different manipulations.

BTW, @mxstbr is there any utilities to convert scss or less into styled-components' tagged templates? For example, I'd like to use it for react-select replacing its scss / less styles, but still keeping the ability to change the variables.

Sorry for off-top, I'm still investigating the solutions to implement theming for the extension.

[mxstbr]

No worries!

We (Jed is my boss) have been meaning to moving react-select over to styled-components for the past month, but have been too busy to do it. If you want to kick that off, that'd be amazing!

As far as Sass/Less utilities go, we're building polished, which will be the Bourbon for styles in JavaScript. We're still early, so there isn't a lot there yet, but I'm working on this for the next weeks to get it to a first complete state!