CODEWITHSUNDEEP
cssreactjssassreact-styleguidist
Dan Zawadzki
Dan Zawadzki

Reputation: 732

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

Upvotes: 0

Views: 1384

Answers (1)

Dan Zawadzki
Dan Zawadzki

Reputation: 732

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%'
        }
    }
};

Upvotes: 6

Related Questions