Themes

[sapegin]

Nice default design is great but ability to customize it for particular project is even better.

Possible solutions:

1. Replace CSS Modules with regular BEM: users will be able to add custom CSS via Webpack config.
2. Fix CSS Modules class names (remove hash): same as 1 but easier for Styleguidist development.
3. Other solution I don’t know about?

[mik01aj]

Or maybe add some classes to the existing elements?

I guess that the users will want to style not only the styleguide headers or prop tables, but also the markdown output (which is not styled by our css modules anyway).

[sapegin]

I don’t want to have two sets of classes. But we can add add many classes as needed, we don’t have to use all of them internally ;-)

[sapegin]

I’ve implemented the second approach and also did some significant refactoring of styles. I hope it’s better now.

Now you should be able to customize Styleguide like this:

.ReactStyleGuidist-colors__base {
  color: #f0f;
}
.ReactStyleGuidist-common__font {
  font-family: "Comic Sans";
}

And the add this CSS file as an entry point in Webpack config.

Unfortunately it doesn’t work for Markdown styles because composition in CSS modules works only with local classes.

[mik01aj]

I like the change a lot! I already started writing some custom styles for my style guide :)

I'll be picky: why ReactStyleGuidist if the name of the project is react-styleguidist? Directly "translated" to camelCase it would be ReactStyleguidist...

[sapegin]

No reason, we can change it ;-)