javascript - 如何在 Mantine 中设置标题组件的样式？

Question

我正在尝试在 Mantine 中设置标题组件的样式: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"并以类似的方式添加渐变。

但是，第一个并没有改变任何东西。而后者会导致错误: 输入 '{ child :字符串；订单:1；我的:“lg”；居中对齐”;梯度:真； }' 不可分配给类型“IntrinsicAttributes & TitleProps & RefAttributes”。 类型“IntrinsicAttributes & TitleProps & RefAttributes”上不存在属性“gradient”。ts(2322)

非常感谢帮助，干杯

Answer 1

如果您需要渐变文本，您可以执行以下操作:

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

如果渐变在多个位置重复使用，那么您可以将其拉入您的主题。