React Recompose: Theme UI Libraries at Runtime Using Context

Bootstrap allows customization of its UI library at compile time using SASS variables. In React we can do better by theming at runtime using a context based theme. We also look at overriding component styles and styles that depend on component nesting.

Watch User Created Playlist (3)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Recompose: Override Styles & Elements Types in React

P

Recompose: Theme React Components Live with Context

P

Recompose: ButtonGroup - When nesting affects Style

P
react tutorial about Recompose: Override Styles & Elements Types in React

Recompose: Override Styles & Elements Types in React

5:54 react PRO

When we move from CSS to defining styles inside components we lose the ability to override styles with an external style sheet. We also lose the ability add the same class to different types of elements to style them consistently. Recompose allows us to regain the ability of override styles and to apply the same styles to different types of elements.

react tutorial about Recompose: Theme React Components Live with Context

Recompose: Theme React Components Live with Context

9:44 react PRO

SASS Bootstrap allows us to configure theme or branding variables that affect all components (e.g. Primary Color or Link Color). When we isolate our styles inside React components we lose the ability to theme them. To get round this we can put our theme variables on the context of our app and then read them from individual components in order to make styling decisions. Recompose allows us to create the helper functions we need to do this yielding concise, functional declarative UI components. These components will respond in real time to changes in the theme.

react tutorial about Recompose: ButtonGroup - When nesting affects Style

Recompose: ButtonGroup - When nesting affects Style

8:23 react PRO

In CSS we use the descendant selector to style elements based on their nesting. Thankfully in React we don't need to consider this most of the time because this nesting of elements happens within the bounds of a single component.

However occasionally the nesting of components affects the styles. In these rare cases we can use context to influence styles yielding a user friendly api to our components.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?