#Mantine UI: Module CSS classes

1 messages · Page 1 of 1 (latest)

unique jungle
#

Silly question, but if we are picking up UI components from ui.mantine. Are we also suppose to pick up the .module classes to drop into our project?

valid iris
unique jungle
#

and these modules are different than just using the import "@mantine/core/styles.css";

valid iris
#

@mantine/core/styles.css are main styles for library. we add our own styles using css modules o any other styling solutions

unique jungle
#

I see, and ui.mantine adds styles outstide of core

valid iris
#

yes

unique jungle
#

so I'm hitting this error while usingt he module css class provided from here for double headers https://ui.mantine.dev/category/headers/
Any suggestions?
Syntax error: Selector "&[data-active]" is not pure (pure selectors must contain at least one local class or id)

valid iris
#

it means that you have to use this selector inside a class.

# 
.mainLink {
  text-transform: uppercase;
  font-size: var(--mantine-font-size-xs);
  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-1));
  padding: rem(7px) var(--mantine-spacing-sm);
  font-weight: 700;
  border-bottom: rem(2px) solid transparent;
  transition:
    border-color 100ms ease,
    color 100ms ease;

  @mixin hover {
    color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
    text-decoration: none;
  }

  &[data-active] {
    color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
    border-bottom-color: var(--mantine-color-blue-6);
  }
}

you can see here it is used in .mainLink class

unique jungle
#

yeah i have that class from the file and it still triggers the error 🙂

#

seems nextjs is considering that to be a global selector