Styling issue - mantine 7 | Mantine | Page 1

restive magnet Jan 14, 2024, 12:44 PM

#

Hi, I've copied a header from ui.mantine. https://ui.mantine.dev/component/header-tabs/

I didn't change a line of code, I only created the component files.
I don't have the same look, for example, on the unstyles button (user button) there is no padding.
Can't figure out what is wrong. I didn't use a template, I've installed the mantine. I installed the postcss dependencies and I've added the import '@mantine/core/styles.css'; on the layout page (using app router on nextjs 14).

Any ideas what could be missing?

cunning flame Jan 14, 2024, 1:54 PM

#

restive magnet Hi, I've copied a header from ui.mantine. https://ui.mantine.dev/component/head...

Follow getting started guide or use one of the templates

restive magnet Jan 14, 2024, 10:14 PM

#

I am facing the same issue on the template

restive magnet Jan 15, 2024, 12:33 PM

#

I think the unstyled button css is overriding my css

#

This is how my layout.tsx looks like on the import order

#

For the header I've followed exacly the ui.mantine component file

#

cunning flame Jan 15, 2024, 1:00 PM

#

restive magnet This is how my layout.tsx looks like on the import order

move core import to the first line

restive magnet Jan 15, 2024, 3:15 PM

#

Same behaviour

#

I've tried in 3 different projects and I get same thing (In all of the 3 projects I got the files from ui.mantine, 1 project I setup mantine myself, and 2 others is from templates)

#Styling issue - mantine 7