Paper component is cascading withBorder and shadow property

[aditya-kumar013]

What package has an issue

@mantine/core

Describe the bug

If I give border to a paper component using withBorder prop which's a parent of any other paper component, the children component get's all the styles as well, and it wont' even override even if I specify it via props.

What version of @mantine/* packages do you have in package.json? (Note that all @mantine/* packages must have the same version in order to work correctly)

7.1.0

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

No response

Do you know how to fix the issue

None

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

None

Possible fix

No response

[rtivital]

Please provide a sandbox with a minimal reproduction, template – https://codesandbox.io/s/mantine-template-9ze89?file=/src/App.tsx

[aditya-kumar013]

@rtivital
Here's a link to sandbox
https://codesandbox.io/s/magical-wind-p66cqy?file=/src/Parent.tsx

you'll see the child paper component didn't received any border or shadow prop but it's inheriting them from the Parent paper component, and worst of all it wont' rest explicitly, I have to use custom css for that,
but it's not taking padding from parent which is a bit odd

[rtivital]

The issue with withBorder was fixed. shadow cascading is not planned to be fixed, you need to explicitly set shadow="none":

export function NestedPapers() {
  return (
    <Paper p="md" withBorder shadow="md">
      Parent
      <Paper p="md" shadow="none">
        Child
      </Paper>
    </Paper>
  );
}

[rtivital]

The issue has been resolved in 7.1.3