你如何在 Mantine 中设置 Title 组件的样式？答案

【问题标题】：How do you style a Title component in Mantine?你如何在 Mantine 中设置 Title 组件的样式？
【发布时间】：2023-02-02 16:57:37
【问题描述】：

我正在尝试在 Mantine 中设置 Title 组件的样式：https://mantine.dev/core/title/

<Title order={1} my="lg" align="center">
        Upload a new Post
</Title>

根据文档，我们可以使用颜色：<Title order={1} my="lg" align="center" color="blue" 并以类似的方式添加渐变。

但是，第一个不会改变任何东西。而后者导致错误：输入'{ children: string;顺序：1；我的：“lg”；居中对齐”;渐变：真； }' 不可分配给类型 'IntrinsicAttributes & TitleProps & RefAttributes'。类型“IntrinsicAttributes & TitleProps & RefAttributes”上不存在属性“gradient”.ts(2322)

非常感谢帮助，干杯

【问题讨论】：

标签： javascript css reactjs typescript mantine

【解决方案1】：

这告诉我 Title 的内在属性、道具和属性没有 color。您可以前往the props page查看所有可用的道具。

我会建议这样的解决方法：

<Title order={1} my="lg" align="center">
    <span style={{ "color" : "red" }}>Upload a new Post</span>
</Title>

【讨论】：

我试图在文本标签中包含上传一个新的帖子，它应用颜色，但是其他配置中断
我也阅读了文档，好吧，它似乎不正确
<Title order={1} my="lg" align="center" style={{ color: "red" }}> 上传新帖子 </Title> 似乎有效

【解决方案2】：

如果你在使用渐变文本，你可以这样做：

      <Title
        order={1}
        my="lg"
        align="center"
        sx={(theme) => ({
          WebkitBackgroundClip: "text",
          WebkitTextFillColor: "transparent",
          background: theme.fn.gradient({ from: "blue", to: "pink", deg: 45 })
        })}
      >
        Upload a new Post...
      </Title>

如果渐变在多个地方重复使用，那么你可以将它拉到你的主题中。

【讨论】：