Reference a custom css class added to MantineProvider theme globalStyles

Question

I'm attempting to add a new class to the Mantine theme globalStyles (ref: https://mantine.dev/styles/global-styles/#global-styles-on-theme). I have adding the style to the MantineProvider, but I can't figure out how to access the style in my component! If I add the class to a Text element using the browser's developer tools, the text is displayed properly, but when I attempt to reference the class in the code, I get an error. This is how I configured the MantineProvider in _app.tsx.

  <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
    <MantineProvider
      withGlobalStyles
      withNormalizeCSS
      theme={{
        colorScheme,
        loader: 'bars',
        globalStyles: (theme) => ({
          '*, *::before, *::after': {
            boxSizing: 'border-box',
          },

          body: {
            ...theme.fn.fontStyles(),
            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
            color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
            lineHeight: theme.lineHeight,
          },

          '.text-blue': {
            color: theme.colorScheme === 'dark' ? theme.colors.blue[5] : theme.colors.blue[7],
          },
        }),
      }}
    >
      <NotificationsProvider>
        <Component {...pageProps} />
      </NotificationsProvider>
    </MantineProvider>
  </ColorSchemeProvider>

And this is how I'm trying to reference the class "text-blue" in my component.

  <Title className={classes.title} order={2}>
     A little bit <span className={theme.text-blue}>about us</span>
  </Title>

If I used hyphenated classs name like 'text-blue', I get an error Type 'number' is not assignable to type 'string'. and if I use a name like 'text_blue' I get Property 'text_blue' does not exist on type 'MantineTheme'.

How can I reference the style that was created in the MantineProvider?

Answer 1

Just use them normally as you would use any global css styles from a global styleSheet(like utility classes)!

<Title className={classes.title} order={2}>
  A little bit <span className='text-blue'>about us</span>
</Title>