Theming specific components with React Toolbox

[adrianmcli]

I found an example repo here that shows how to integrate React Toolbox with a global theme (by way of using react-toolbox-themr.

But unfortunately, it seems that it does not show how I can customize the theme (not style) of a specific component. It also does not seem to be a use-case supported by react-toolbox-themr, or at least I have not found a way to do it.

Lack of CSS Modules

Normally, this is done with CSS Modules, but since the example does not use CSS Modules, I am not sure how I can fulfill the required API.

So, although this works:

import Button from "react-toolbox/lib/button/Button"

const Component = () => <Button></Button>

This does not work:

import Button from "react-toolbox/lib/button/Button"
import btnTheme from "./btnTheme.css"

const Component = () => <Button theme={btnTheme}></Button>

Since we don't have CSS Modules, adding theme={btnTheme} with the import btnTheme from "./btnTheme.css" will Next.JS to not know how to import a CSS file. I should also note that the main README.md cautioned against using the custom Webpack configuration to add loaders (like a CSS loader in this instance), because only the client code gets bundled with Webpack.

Warning: Adding loaders to support new file types (css, less, svg, etc.) is not recommended because only the client code gets bundled via webpack and thus it won't work on the initial server rendering.

Source: https://github.com/zeit/next.js#customizing-webpack-config

What is the best course of action here?

[timneutkens]

Since we support postcss in styled-jsx now using styled-jsx plugins. You could add postcss-import and <style jsx>{@import 'some-module/file.css'}</style>. Haven't tested it yet. cc @albinekb