React-styleguidist: Easy way to set style to body

[sapegin]

• Find a way to do that (I guess via styles option, it may be already supported)
• Do not add new options
• Document in the cookbook

[sapegin]

It’s already possible but undocumented:

module.exports = {
    components: 'src/components/**/[A-Z]*.js',
    styles: {
        StyleGuide: {
            '@global body': {
                fontFamily: 'Helvetica',
            },
        },
    },
};

[sanjsanj]

@sapegin Is this issue still open and has the scope just changed to document the feature instead?

[sapegin]

@sanjsanj Exactly!

[sanjsanj]

@sapegin Perhaps I could pick it up then if you don't mind :)

No idea what to do but I'll fork the repo and have a look.

[sapegin]

I think the best way is to expand this question with an example from my comment above: https://react-styleguidist.js.org/docs/cookbook.html#how-to-add-custom-javascript-and-css-or-polyfills

[sanjsanj]

Cheers! I'll look at that now. I have been looking at this issue and will come back to you with further questions asap.

[sanjsanj]

@sapegin Apologies for the hassle but I have some questions:

• Would it make sense to include this in the #how-to-change-styles-of-a-style-guide section, and expand a little bit more on how to reference the CSSinJS API to construct styles here?

(This is my first time using your package and at first it wasn't clear that themes uses your own API and styles uses the CSSinJS API.)

• Since you are using '@global' does this mean that JSS-global is also available? It's not listed in the available plugins in that section.

• Sorry but I have no context as to why this issue was flagged up, is there a particular use case we could reference?

• You say that for this component <LogoRenderer><h1 className="logo-524678444"> you would use this styles object:

styles: {
    Logo: {
        logo: {
            animation: 'blink ease-in-out 300ms infinite'
        }
    }
}

Should Logo be LogoRenderer instead or am I missing something?

[sapegin]

Would it make sense to include this in the #how-to-change-styles-of-a-style-guide section, and expand a little bit more on how to reference the CSSinJS API to construct styles here?

No, it won’t change style guide styles, only style of user components.

Since you are using '@global' does this mean that JSS-global is also available? It's not listed in the available plugins in that section.

Nice catch! We should add it to the list. Here is the full list of available plugins:

https://github.com/styleguidist/react-styleguidist/blob/3fce9f2af736dd459301593c99ef4e4aaebabc36/src/styles/setupjss.js#L2-L7

Sorry but I have no context as to why this issue was flagged up, is there a particular use case we could reference?

I think the most common would be setting a font face, otherwise, if you don’t set font face explicitly in each component, they will be rendered with the browser default font.

Should Logo be LogoRenderer instead or am I missing something?

No, we strip Renderer part before applying styles, because only *Render components may have styles:

https://github.com/styleguidist/react-styleguidist/blob/3fce9f2af736dd459301593c99ef4e4aaebabc36/src/rsg-components/Styled/Styled.js#L6

[sanjsanj]

Just opened a PR, not sure if it's what you had in mind or not but let's get the ball rolling.

Awaiting feedback :-)

[wachunga]

@sapegin is that Renderer removal documented somewhere? I've found it very confusing trying to apply styles.

[sapegin]

It is: https://react-styleguidist.js.org/docs/cookbook.html#how-to-change-styles-of-a-style-guide

[craigkovatch]

@sapegin this appears to be broken in prod -- is it because it relies on component name matching, and those component names are removed when minified?