Updating themes / styles dynamically

[Rafael Vidaurre]

I have a use case where I basically need the component's props to modify styles.
Something like this:

setStyles((theme, props) => ({
  section: {
    color: props.userPickedColor,
  },
})(Component);

Is this possible right now? My users set values in the database that I retrieve and use to style components, which is why I need some way to access those values in runtime.

Another option might be to dynamically create themes and change the themeProvider's value each time, but that doesn't sound very wise. Even so if there's no other option I'd go with that I guess.

Thanks for the help!

[Joe Lencioni]

I think you have two options:

1. You could enumerate supported colors and switch between them. This is only practical for styles with low cardinality.
2. Pass in an object with the high cardinality styles to css(). e.g. <div {...css(styles.foo, { color: props.userPickedColor })} />.

See https://github.com/airbnb/javascript/tree/master/css-in-javascript#inline for some more information about this.

I hope this helps!

[Rafael Vidaurre]

This helps, thanks a lot @lencioni !