如何在组件中引用MantineProvider全局样式中的自定义CSS类？

问题原因 #

你在globalStyles中定义的.text-blue是全局CSS类，不属于Mantine主题对象的属性。你错误地尝试通过theme.text-blue或theme.text_blue引用它，这两种写法都不符合语法逻辑：

• theme.text-blue会被JavaScript解析为theme.text减去blue，导致类型不匹配错误
• theme.text_blue并非Mantine主题内置属性，所以触发不存在的属性报错

正确引用方式 #

直接将类名字符串传入className属性即可，因为全局样式已经注入到页面全局作用域：

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

补充方案（动态主题色） #

如果需要在组件中直接使用主题颜色值（无需依赖全局类），可以通过useMantineTheme钩子获取主题配置，再用内联样式实现：

import { useMantineTheme } from '@mantine/core';

function AboutSection() {
  const theme = useMantineTheme();
  const blueColor = theme.colorScheme === 'dark' ? theme.colors.blue[5] : theme.colors.blue[7];
  
  return (
    <Title className={classes.title} order={2}>
      A little bit <span style={{ color: blueColor }}>about us</span>
    </Title>
  );
}

内容的提问来源于stack exchange，提问作者mack