如何在Mantine中设置Title组件样式？遇color无效、gradient报错

AI 小北

2026-8-2

解决Mantine Title组件样式设置问题

问题说明

使用Title组件时，color属性无效果
添加gradient属性时触发TypeScript错误，提示该属性不存在于TitleProps类型中

解决方案

1. 修复`color`属性无效问题

Title组件的color属性可能被全局样式或组件默认样式覆盖，推荐通过以下两种方式设置文字颜色：

方式一：用`sx`属性直接指定颜色

<Title order={1} my="lg" align="center" sx={{ color: 'blue' }}>
  Upload a new Post
</Title>

方式二：结合主题色值设置

如果使用Mantine主题系统，可直接传入主题定义的颜色键值：

<Title 
  order={1} 
  my="lg" 
  align="center"
  sx={{ color: theme => theme.colors.blue[6] }}
>
  Upload a new Post
</Title>

2. 实现文字渐变效果

Title组件本身不支持gradient属性，需通过CSS背景渐变结合文字裁剪实现：

方式一：用`sx`属性自定义渐变样式

<Title 
  order={1} 
  my="lg" 
  align="center"
  sx={{
    background: 'linear-gradient(90deg, #0070f3, #9b59b6)',
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text'
  }}
>
  Upload a new Post
</Title>

方式二：通过`createStyles`创建可复用样式

import { createStyles, Title } from '@mantine/core';

const useStyles = createStyles((theme) => ({
  gradientTitle: {
    background: `linear-gradient(90deg, ${theme.colors.blue[6]}, ${theme.colors.purple[6]})`,
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    backgroundClip: 'text',
  },
}));

function MyComponent() {
  const { classes } = useStyles();
  return (
    <Title order={1} my="lg" align="center" className={classes.gradientTitle}>
      Upload a new Post
    </Title>
  );
}