menu

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress!

Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# Help
view-forward
# jest
view-forward
# Off Topic
view-forward
# Website
view-forward
Team

Injecting components for advanced theming

December 20, 2017 at 5:26pm

Injecting components for advanced theming

December 20, 2017 at 5:26pm
Does it make sense for a component to take not just styles from a theme but full styled components? For example https://gitlab.coko.foundation/tamlyn/theming/blob/master/injected-ui/src/TextInput/TextInput.js

Background

I'm working on an open source suite of React components (https://pubsweet.org) which will be used by different organisations and needs to fit in with their branding. Theme variables for fonts, colours, spacing etc. will get us most of the way there but it's likely implementers will need to make changes which we don't have a variable for.
React CSS Themr is a good fit for this but has some issues as discussed here https://github.com/react-toolbox/react-toolbox/blob/dev/ROADMAP.md#where-is-this-project-going

December 20, 2017 at 7:07pm
Haha, that's actually what is doing now for react-toolbox instead of react-css-themr!
  • reply
  • like
So yeah, you're definitely on a good road
  • reply
  • like

December 21, 2017 at 10:49am
Yes, I read about that in his roadmap (which you posted - thanks!). But I couldn't find any concrete implementation examples and he seems to have gone quiet on that project.
like-fill
1
  • reply
  • like
I think your implementation is basically what he's looking to do, as far as I understand
  • reply
  • like
He gave a talk about this topic at ReactiveConf a month ago (https://www.youtube.com/watch?v=uFkyn9cFkO8), maybe that helps illuminate his intentions a bit? Haven't come around to watching it yet though https://www.youtube.com/watch?v=uFkyn9cFkO8
  • reply
  • like

January 4, 2018 at 10:03am
Thanks for the link. Yeah that video explains it well. His implementation is very similar though he uses factory functions to create components with the styled components injected, whereas I am using the context to pass down the styled components.
  • reply
  • like
His approach works well for atoms and molecules but gets complex for organism level components which I need to support. One issue with my approach is you need a consistent naming convention to address each component from the theme.
  • reply
  • like