How to use isomorphic-style-loader effectively with component libraries?
See original GitHub issueI’m trying to use React Toolbox alongside isomorphic-style-loader in my project. React-Toolbox uses CSS modules for its components.
My current solution that I haven’t implemented yet is to import each component and its styles, apply withStyles, and export the new component. An example file would look like:
// component_library/Button/index.js
import Button from 'react-toolbox/lib/button';
import buttonStyles from 'react-toolbox/lib/button/theme.scss';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
export default withStyles(buttonStyles)(Button);
Is there a way to apply isomorphic-style-loader’s withStyles()
across all of a library’s components without me having to manually import each file and re-export it?
Issue Analytics
- State:
- Created 7 years ago
- Reactions:2
- Comments:18 (2 by maintainers)
Top Results From Across the Web
How can I publish react components on npm based on ...
I want to move my shared components to npm so I can use them in my projects easily. I use the isomorphic-style-loader to...
Read more >@async3619/isomorphic-style-loader - npm
CSS style loader for Webpack optimized for critical path CSS rendering and isomoprhic web apps. Latest version: 5.1.1, last published: 3 ...
Read more >The Pain and the Joy of creating isomorphic apps in ReactJS
The only thing we should do is to take React Js library and use it ... We use webpack and usually we import...
Read more >isomorphic-style-loader examples - CodeSandbox
Learn how to use isomorphic-style-loader by viewing and forking example apps that make use of isomorphic-style-loader on CodeSandbox. ; parityapp/admin-panel.
Read more >Render CSS on Server Side with React and Isomorphic-Style ...
1. Install the loader · 2. Make sure to use it on both server and browser Webpack configs. · 3. Use it in...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Interesting, what do you do with
MyComponent.css
though? Are you saying to use it like so:If so, I don’t believe that works. The original button component at
react-toolbox/lib/button
is still referencing the oldreact-toolbox/lib/button/theme.css
, which means that the Button would use the wrong localized class names.There you go, fresh out out of the oven. Use it instead of withStyles. It expects the same arguments as themr() function from react-css-themr, except it has isomorphic-style-loader superpowers 😃
Theming react-toolbox components is very easy with react-css-themr. Read react-toolbox installation guide to see how to set it up with themr. Besides themr is very nice to use for styling your own components as well. You can even switch themes at runtime with ThemeProvider. (Although there is a bug (https://github.com/javivelasco/react-css-themr/issues/34), which can be fixed to make componentWillReceiveProps() method of themr() function track also changes to the context. I’m too lazy to do it myself, personally I don’t need runtime theme switching right now.
The code hasn’t been tested properly so please be gentle. Let me know if you spot any bugs.