Container has padding-right and padding-left even if padding: 0 is added

What package has an issue

@mantine/core

Describe the bug

I’m using the latest version of Mantine and the Container component is receiving padding-right and padding-left properties even when padding: 0 is used in the applied class or in the MantineProvider styles. It only works if px={0} prop is used.

import { MantineProvider, Container } from "@mantine/core";

export default function App() {
  return (
    <MantineProvider
      withGlobalStyles
      withNormalizeCSS
      styles={{
        Container: {
          root: {
            padding: 0 // this has no effect
          }
        }
      }}
    >
      <Container
        sx={{
          width: 500,
          height: 300,
          backgroundColor: "#ff00FF20",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          padding: 0 // this has no effect
        }}
        px={0} // this works
      >
        Hello World!
      </Container>
    </MantineProvider>
  );
}

In which browser did the problem occur

Chrome and Firefox

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/agitated-sutherland-3mjowl?file=/src/App.tsx

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

No response

[rtivital]

It is not related to Container, set padding prop to 0 instead

[rtivital]

You can fix that by setting defaultProps instead of styles on MantineProvider – https://codesandbox.io/s/sweet-waterfall-51pnky?file=/src/App.tsx

This is an issue with styles priority, I’ll try to fix it with one of the next patches.