Styling shareable React component?

Question

I've been looking for a good way to style a react component just using css stylesheets. I would have used style-loader, because it's as easy as require('./style.css') and allows to save the final styles into a stylesheet file for production, but... I'm trying to make a shareable react component (I will publish it as a library for anyone to use), so using webpack or other kinds of bundling is not going to work (otherwise React library will get bundled along with my code).

Is it ok to just leave require('./style.css') in my source code, and perhaps just assume that user will have the style-loader or something similar that can recognize requiring css assets? Or is there a more elegant way that would still be as easy as requiring stylesheets from JS, wouldn't need the user to have style-loder, and would be isomorphic?

Please don't offer me to use styled-components or inline styles. Stylesheets offer much more functionality, and I'm not willing to sacrifice it.

Answer 1

No, please don't require the css file like that. That restricts the ways that your component can be used.

Its pretty common for people to run the same code base on the client and the server. Requiring a css file can't do anything useful when running on the server.

Instead, provide the css file in your bundle and document where it is. The end user can require() it, import it in a scss file, or whatever works for them. That gives you the best flexiblity.