How to change the document content's width?

Question

The default max-width of 'main' element is 1000px, I want to make it wider. I tried the customize style instruction but cannot locate the 'main' element or the 'rsg--content-xx' class by below config in 'styleguide.config.js'

styles: {
  StyleGuide: {
    'rsg--content': {
      maxWidth: 1300,
      width: 1300
    },
    '@global main': {
      maxWidth: 1300,
      width: 1300
    }
  }
}

Any help would be very appreciate.

score 5 · Answer 1 · answered Dec 07 '18 at 19:23

5

The styles function in the StyleGuideRenderer component takes the theme as the argument. maxWidth is set in the theme. You can override theme properties in styleguide.config.js:

module.exports = {
  theme: {
    maxWidth: 1300
  }
}

answered Dec 07 '18 at 19:23

Joe Maffei

1,855
1
15
18

score 0 · Accepted Answer · answered Oct 10 '18 at 20:33

0

According to the docs it should be something like this:

styles: {
  StyleGuide: {
    content: {
      maxWidth: 1300
    }
  }
}

answered Oct 10 '18 at 20:33

Artem Sapegin

3,096
2
16
20

thanks, it works! It's better to put the relate html markup beside the example of the `styles` in the documentation to help people understand how it works. – Crusoe.Xia Oct 13 '18 at 02:10
Feel free to send a pull request — docs are never perfect ;-) – Artem Sapegin Oct 17 '18 at 15:34
This answer no longer works. See my explanation: https://stackoverflow.com/a/53675663/4642023 – Joe Maffei Dec 07 '18 at 19:24

How to change the document content's width?

2 Answers2