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.

Answer 1

According to the docs it should be something like this:

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

Answer 2

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
  }
}