How to change the default max-width for Container?

[sjaakbanaan]

So if do just:

import { Container } from '../styled-system/jsx'
function App() {
 return (
   <Container>
     <div>First</div>
     <div>Second</div>
     <div>Third</div>
   </Container>
 )
}

How to make sure the max-width is no longer 1440px (the default value for 8xl), but it becomes 1260px instead? Preferably I don't want to overwrite the value for '8xl' in the sizes tokens. How can i use the above code where Container has a max-width of 1260px, without setting a maxWidth prop on it?

[segunadebayo]

You need to extend the container pattern and create your own transform

Here's an example from Park UI.

defineConfig({
  patterns: {
    extend: {
      container: {
        transform(props) {
          return {
            position: 'relative',
            width: '100%',
            mx: 'auto',
            px: { base: '4', md: '6' },
            maxWidth: '<INSERT_VALUE>'
            ...props,
          }
        },
      },
    },
  }})

[sjaakbanaan]

Thank you @segunadebayo ! I missed the 'transform' part in the docs :)