我尝试向Mantine主题globalStyles添加一个新类（参考：https：//mantine.dev/styles/global-styles/#global-styles-on-theme）。我已经将样式添加到MantineProvider中，但我不知道如何在组件中访问样式！如果我使用浏览器的开发工具将类添加到Text元素中，文本将正确显示，但当我试图在代码中引用该类时，我会得到一个错误。这就是我在_app. tsx中配置MantineProvider的方法。

<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>

这就是我在组件中引用类“text-blue”的方法。

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

如果我使用像'text-blue'这样的连字符类名，我会得到一个错误Type 'number' is not assignable to type 'string'.，如果我使用像'text_blue'这样的类名，我会得到Property 'text_blue' does not exist on type 'MantineTheme'。
如何引用MantineProvider中创建的样式？