Search code examples
csschakra-ui

Chakra-UI - padding-inline

I'm trying to figure out how Chakra UI imposes padding on components so that I can override the imposition.

It's difficult to figure out where things apply because the labels on divs in the inspector are shown as a random bunch of strings that don't reflect the names of the divs used by Chakra UI.

If I use Chakra UI components (such as hero or page shell), it imposes a huge amount of padding on the horizontal axis. I have tried to apply minW="100%" and p="0" to every Box div I can find and I still can't make the component take up the width of the screen (at top level). It takes up about half if I use it the way Chakra UI makes it available.

The code inspector shows the 4 settings imposed in the picture. How can I reverse them and how can I find the name of the div where they have been imposed? I'd like to get rid of the margin and the padding on the horizontal axis but cannot find the override.

enter image description here

Solution

  • The properties that you'll want to change are maxW and px. From looking at Chakra UI Pro's "Shell with sidebar", they apply a max-width to the top-most sidebar div. They also apply padding-inline-start and padding-inline-end to the same div - px={0} will override this.

    To make finding a specific div easier, you can temporarily apply a className to Chakra components like Box. This will make it easier to find in the inspector.

    If you're still having trouble finding the right div, create a code sandbox and I'll take a look.