UnstyledButton css takes overwrites applied classes

reachtrevor commented 2 days ago

Dependencies check up

[X] I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.14.3

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

Chrome

Describe the bug

When applying styles (specifically padding in this case) the class defining styles for the UnstyledButton component somehow take precedence over a class applied via the className prop.

This is confusing because they are both the same level of css specificity (just classes).

background-color is also affected, this is probably obvious because it has a defined property & value in the UnstyledButton class.

Note!

I happen to have the same styles in another project running Mantine v7.13.2, everything there works as expected.

Recreation

CSS using Postcss with latest configuration from Vite template from Mantine documentation.

.userButton {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;

  &:hover {
    background-color: light-dark(
      var(--mantine-primary-color-0),
      var(--mantine-primary-color-5)
    );

    color: light-dark(
      var(--mantine-primary-color-5),
      var(--mantine-primary-color-0)
    );
  }
}

Component Definition

<UnstyledButton w="100%" className={classes.userButton}>
  <Group>
    <Avatar size="md" color="bright-pink" />
    <Stack gap={0}>
        <Text>{fullName}</Text>
        <Text size="sm" c="dimmed">
          {email}
        </Text>
     </Stack>
  </Group>
</UnstyledButton>

Result:

When replacing UnstyledButton with Box it works as expected

<Box w="100%" className={classes.userButton}>
  ...
</Box>

Result:

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

[ ] I would be willing to implement a fix for this issue

rtivital commented 2 days ago

See https://help.mantine.dev/q/styles-order

reachtrevor commented 2 days ago

See https://help.mantine.dev/q/styles-order

Thanks for the response on a weekend @rtivital, I tried both suggestions in the article you sent an neither worked.

Since I haven't made much progress I've put the repository up on github https://github.com/reachtrevor/befe

Quick setup:

Navigate to the root install and run yarn
npx nx serve console to start the React app
Navigate to http://127.0.0.1:4200/console

You'll see the sidebar and how the navigation links are scrunched up. If you look at MainNavLink.module.css you'll see the css for them. main.tsx is where I import everything, I already had it importing in the correct order, I change the css import to include "layer" as you will see.

It's worth noting that everything was working for about a day, then I installed and configured redux-toolkit and everything broke. I don't think it has anything to do with redux-toolkit specifically, but maybe some package got upgraded along the way.

rtivital commented 1 day ago

You did not change styles to layers import. https://github.com/reachtrevor/befe/blob/main/apps/console/src/main.tsx#L2

mantinedev / mantine