cssreactjssassreact-styleguidist

Adding custom styles to the react-styleguidist library


I'm trying to create project documentation using the react-styleguidist library. However, I have a problem. Well, in the project I did reset the unit rem to use multiples of 10px, not 16px.

Everything works great, but I did it at the root of the app styles. Stylegudist does not see it. How can I add such a line to docs library?

html {font-size: 62.5%; / * Now 10px = 1rem! * /}

Or make it other way. I don't want to put rem reset to each of my component styles.

Cheers, Daniel


Solution

  • Based on the suggestion of @ArtemSapegin, I found this repository, which turned out to be very helpful! I hope that it will solve someone else problem in the future!

    This is how looks my styleguide.config.js.

    module.exports = {
        template: {
            head: {
                links: [
                    {
                        rel: 'stylesheet',
                        href: 'https://fonts.googleapis.com/css?family=Montserrat:400,600'
                    }
                ]
            }
        },
        theme: {
            fontFamily: {
                base: '"Montserrat", sans-serif',
                fontSize: '62.5%'
            }
        }
    };