React-styleguidist: [Feature request] Remove all content styling

[swese44]

Hello. We have migrated YamUI from Storybook to Styleguidist. YamUI is a UI framework + component library, and provides all base styling for the app it's used in. Unfortunately Styleguidist styles its own render components, so the generated styleguide app doesn't really reflect our styling and typography. For our use case it would be ideal if there was an option to suppress Styleguidist CSS outside of the sidebar navigation and code editors.

[sapegin]

I don’t really understand your use case. If you disable all Styleguidist UI styles, you'll have to write your own anyway, which you can do now.

[swese44]

hey thanks @sapegin. Our UI framework already includes a CSS reset + baseline styles for any consuming app. Arbitrary semantic markup will automatically be styled to look and feel like YamUI.

Styleguidist renders great semantic markup. But every section, header, heading, article, paragraph, etc. tag has classnames with more styles than we could manually reset, so I don't think theme or styles will work for us.

Another option is to override every render component, but that's probably more tech debt than we want to maintain.

For use cases like ours, a styleguide for a UI framework with its own reset and baseline styles, it would be ideal if we could flip a switch and disable all the Styleguidist render component CSS except for the sidebar and code editor components so the documentation reflects our framework's look and feel.

[sapegin]

We purposefully isolate Styleguidist UI from any user styles because it will break the UI. You can try to disable jss-isolate for Markdown styles:

module.exports = {
  styles: {
    Markdown: {
      base: {
        isolate: false,
      },
      para: {
        isolate: false,
      },
      // ...
    }
  }
}

[allybee]

I am having this same issue and I've tried setting isolate: false but it doesn't seem to be working. @swese44 did you find a solution?

[konsumer]

I am also having same issue. Things like h-tags have your rsg-heading-* classes applied, which makes the markdown look different from our styles.

Here is an example using Bootstrap's h* classes, which look the same without those classes, but don't match with them:

Since I already import my stylesheet to set that all up, it would be ideal if the render-area had no styles applied.