Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Mar 23 2018 05:16
    ZxBing0066 opened #887
  • Mar 22 2018 21:22
    sapegin closed #886
  • Mar 22 2018 16:17
    sapegin labeled #886
  • Mar 22 2018 16:17
    sapegin labeled #886
  • Mar 22 2018 14:36
    stefanheine opened #886
  • Mar 22 2018 11:24
    sapegin labeled #826
  • Mar 22 2018 11:24
    sapegin closed #867
  • Mar 22 2018 11:23
    sapegin closed #883
  • Mar 22 2018 10:34
    sapegin closed #885
  • Mar 22 2018 09:49
    sapegin closed #881
  • Mar 22 2018 09:44
    RusinovAnton opened #885
  • Mar 22 2018 09:32
    sapegin closed #882
  • Mar 22 2018 09:32
    sapegin milestoned #883
  • Mar 22 2018 09:31
    sapegin labeled #883
  • Mar 22 2018 09:31
    sapegin labeled #884
  • Mar 22 2018 08:15
    sapegin edited #195
  • Mar 21 2018 22:56
    jsphstls opened #884
  • Mar 21 2018 20:14
    denchen edited #883
  • Mar 21 2018 20:13
    denchen opened #883
  • Mar 21 2018 18:08
    sapegin milestoned #868
Edwin Joseph
Anyone else having an issue using styled components when building the style guide? Some of my styles are missing. Not sure what it is, I believe it is to do with code splitting but am not sure. Works fine when I run it locally. Here is the public site
Edwin Joseph

@Zerka1982 Here is one way of doing it Personally I think this is not a great way of displaying navigation as:

  1. It isn't responsive, i.e. you can't hover on mobile nor do you have the screen space to display all sublists.
  2. If you work out if an item has a sublist on hover, there is no way to let the user know if then need to hover on an item to see a sublist.

I would try to update your data to be something like:

const data = [
    name: "Item 1",
    sublist: [
        name: "Item 1.1",
        sublist: [...],

and create a function that iterates through the list and each sublist to render actual DOM elements. As for how I'd display it, I'd make the user click on an item to display the sublist and have the sublist on top of the parent list with the option to "go back" hiding the sublist.

Edwin Joseph

So I figured out why my styles were missing, it has nothing to do with code splitting but in fact was to do with using styled components to select a child DOM element.

For example, doing this:

const NavItem =`
  & > a {
    color: red;

caused the css in production to not style the a tag.

Instead I'd have to do this:

const NavLink = styled.a``;

const NavItem =`
  & > ${NavLink} {
    color: red;

Does anyone know how I'd be able to avoid this?



I picked up the issue on completing code coverage.

When I review the coverage, I see logger.ts as only having 72%.

When I look under test files I don't see an folder for scripts which is where this file lives under the project?

never mind, figured it out
@edwinjoseph thank you dude. Looking forward to hear from u soon.

Hey guys, I'm working on new cypress tests, and created a new file under test/cypress/integration


However, even when I rerun the commands to setup the cypress test environment the new file is

npm run test:cypress:pre

still not being found?

 Specs:    2 found (component_spec.js, core_spec.js)

is the output when I run:

npm run test:cypress:run

from cypress.json I see that this integration folder is where this test belongs, so I'm not sure on next steps?

"integrationFolder": "test/cypress/integration"
Mathieu Marques
Hello, I've read in an issue that it wasn't recommended to overwrite non-rendered components. How else should I overwrite slots?
That is, in order to toggle off specifics elements from the styleguide
Mathieu Marques
Another question, is it possible to have custom modifiers on Markdow code blocks?
Jonathan Krone
Hi there community, I have a question I've been unable to effectively search for or find an answer to.
I'd like to render a content-only page (like an introduction to this documentation site) but have some fancier effects going on and so would like to write the page as a React component itself. Is there anyway to render a component instead of a .md file for the content of a page?
Eric Morton
@jonkrone_gitlab I would like to know the same. So far i've only been able to use a .md file as content for a section. HTML is allowed here, but I'm unable to use React components
Daniel Ortiz Costa
You can use a mn
an md file with a jsx block as your container... if the md file is not linked to a component it will
not add any code playground and it should embed regular components
Eric Morton
@danoc93 thanks! i got it working by wrapping the entire content of the .md file in a jsx noeditor code block
Pierre Nel
When I run styleguide server, I see my styled component code (themeprovider + global style etc) - but on styleguidist build, the examples in the mdx somehow dont have the styled component err styles applied :confused:
Andrew Bail

Hey Styleguidist friends. Im looking at my options to add release notes to my styleguidist page.
My styleguidist is currently structured in a way that each component has its own page, where you can see examples, experience usage and API documentation.
You can see this here:
What I want is to put a changelog at the base of each component, to include all the changes that effect that component.
I also want a page that includes all of the changes for a certain version.
So for example you would see:




Bug fix
New prop

Release notes



Bug fix
A different fix
New prop

I was trying to do this by making my sections a function that looks to the file system and inside a component directory would find all the relevant files. I was using fs for this

      name: "Changelog",
      sections: (path) => {
        const sectionTemplate = (fileName, path) => ({
          name: fileName,
          content: `${path}/${fileName}`
        files = fs.readdirSync(path).filter(fn => fn.endsWith('.md') && fn.startsWith('v'));
        return> sectionTemplate(file, path))

It looks like that this code is being run both during compile time, and in the browser. this code then fails as browsers dont have access to a fs module.

Has anyone had success with containing dynamic sections with markdown in them?

What I would want, is that this is run a build time based on the file system. then the code run in the browser is simply rendering that.
Cristian Yáñez

Hi everyone. I'm using styleguidist 7.2.5 + react-scripts 1.1.4. I've updated to react-scripts 2.0.3 and the following is happening:

The server runs but when loading the page is blank and the following error apears in the console: index.js:93 Uncaught TypeError: Cannot read property '_import' of undefined

My end goal is get up to date with Styleguidist, but it drops support for Webpack 3 so that's why I'm updating react-scripts.
Well, I've tried updating to react-styleguidist==7.3.11 and now it works fine, leaving the message here in case it's useful for someone.
lin onetwo
HI, how to add another language, to make the doc i18n?
There is an issue said there is a doc for that, but I can't find any doc related to language, i18n or translation.
Hi, I have question regarding file. Is there any way to have if statement in file? We have two different theme in our application and base on the theme we want to show different components in file. For example theme A we show two buttons but in theme B we want to show three buttons. There is button on our styleguiddist application that you can switch between theme. Basically we want to have dynamic readme file.How can I do that? thanks
This message was deleted

Hi everyone. I'm trying to create a PR to add anchors to MarkdownHeadings (see styleguidist/react-styleguidist#833).

I thought it would be wise to add this as a styleguid.config.js option, as I don't know how else the MarkdownHeadingRenderer would know to render an achor as well. However, I can't find how to acces this particular config option from the context of the MarkdownHeading(Renderer). Is there a way to access the config (using something like context?)

Alfonso Austin
Hey all, how can i get styleguidist to auto-launch on a different domain? so instead of launching on localhost:6060 -->
Hi all, I have just started using styleguidist and was wondering if there was a way for the components to share a context?
For example:
A LoginButton and a ProfileView component that use an authentication context, when you login with LoginButton the ProfileView will update.
Who can help me solve this problem
Eduardo Reis Nobre
Hi guys, kinda of a dumb question... but how do I add my styles to the preview written on the markdown files on my project?
2 replies
Jagadeesh Avvaru
Hi all!! I am in the process of converting all of my .jsx files to typescript (.tsx). I would like to generate documentation for props in .jsx and .tsx files in my project. Is there any way to use react-docgen and react-docgen-typescript at the same time in styleguide.config.js to generate documentation for props?
Andrew Blowe
What is the best way to add multiple example tabs, for example one tab for React, and one for Vanilla html? I was able to get it to work, but it was very clunky to implement so I was hoping there was a straighforward solution. Here's what I have above ^
Jamie Woodmancy

Hey there, I'm using Styled Components in a React Native project, and they work great. However, we're at a point where we want to start documenting our components. I've read and re-read the docs for standard and third-party configurations. I've also done gone over the config steps and examples from both the RN and SC example repos. The docs page loads when I run locally, but the components aren't styled. I prefer using the css={css...} syntax, because it allows me to pass fewer props. But I've also tried the styled.Text syntax. Neither way seems to be passing the styling to the elements.

Also, I've confirmed that my theme values are received at the component level. So that's not the problem.

Has anyone else had any luck with this kind of setup or know what I might be doing wrong?

Aavgeen singh
Hey folks. I am getting a Unexpected token error for JSX when i try to serve the docs using styleguidist server
Here is my webpack config:
 webpackConfig: {
    module: {
      rules: [
        // Babel loader will use your project’s babel.config.js
          test: /\.js?$/,
          exclude: new RegExp('/node_modules/(?!react-kuic).*/'),
          loader: 'babel-loader'
        // Other loaders that are needed for your components
          test: /\.css$/,
          use: ['style-loader', 'css-loader', 'postcss-loader']
          test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3|ico)$/,
          use: ['file-loader']
Hi, can i export the markdown files when run styleguidist build?
Esa Juhana
How do I EASILY sort components in alphabetical order when I have components in subfolders too, such as /forms/input, /forms/checkable
Esa Juhana
juliane nagao
Hi, how do I enable the props and methods tab?
1 reply
Esa Juhana

MVP method for ordering the components in alphabetical order:

Make folder names such as "001_color" or so, gather all components with Barrelsby or something similar

001_color is the first one on sidebar
Is there any support for multiple tabs in the code example ?
Has anyone set up a library with Styleguidist that's using styled-components and JS (not TypeScript!) and has a public repo? I have a good handle on Styleguidist but I'm starting a fresh library for work and want to use styled-components, which I've never used before. I'd like to see examples of best practices for component structure and setup, but most that I've found use TypeScript and I'm not familiar enough with that to pick out the relevant parts.