Don't work "MantineProvider"

[SergeyBiryukov34]

Hello) no base font applied on the page

[rtivital]

Hi @SergeyBiryukov34 Mantine does not expose any global styles if you want styles applied to non Mantine components you will need to include GlobalStyles, see documentation here – https://mantine.dev/theming/create-styles/#globalstyles-component

[SergeyBiryukov34]

It was my mistake, I didn't include the WithProvider component in index.js

Can you please tell me how I can add "primary Color" to the theme of the "MantineProvider" component now?

[rtivital]

primaryColor should match one of the keys from theme.colors, it cannot be a hex value

[dallanlee]

I had the same confusion with theme.primaryColor because the docs state that primaryColor should be string under the theme object shape definition… Although I remember reading in the docs that "...you can change it to any color defined in theme.colors," I saw 'cyan' in the example and assumed it was just using the CSS color keyword "cyan". Maybe a more detailed example could demonstrate that a custom color can be defined in theme.colors and used for the theme.primaryColor.

For example:

const MY_COLORS = {
  brand: [
    '#E7E9EE',
    '#D2D3D7',
    '#9D9FA4',
    '#5c5f66',
    '#373A40',
    '#2C2E33',
    '#25262b',
    '#1A1B1E',
    '#141517',
    '#101113',
  ],
}

const mantineThemeOverrides = {
  …
  colors: MY_COLORS,
  …
  primaryColor: 'brand',
  …
}

[rtivital]

Yep, that seems reasonable, PR is welcome 👍

[dallanlee]

Okay. I'll work on a PR.