1

I am trying to style the Title component in Mantine: https://mantine.dev/core/title/

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

According to the docs, we can use color: <Title order={1} my="lg" align="center" color="blue" and add gradient in a similar fashion.

However, the first does not change anything. While the latter results in the error: Type '{ children: string; order: 1; my: "lg"; align: "center"; gradient: true; }' is not assignable to type 'IntrinsicAttributes & TitleProps & RefAttributes'. Property 'gradient' does not exist on type 'IntrinsicAttributes & TitleProps & RefAttributes'.ts(2322)

Would really appreciate help, cheers

Pavel Fedotov
  • 748
  • 1
  • 7
  • 29

1 Answers1

2

If you are after gradient text, you can do something like:

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

If the gradient is reused in multiple spots, then you can pull it into your theme.

enter image description here

Chris
  • 54,599
  • 30
  • 149
  • 186
  • Says: Property 'gradient' does not exist on type 'MantineThemeFunctions'.ts(2339) changed to `theme.fn.linearGradient(45, "red", "blue")` – Pavel Fedotov Feb 02 '23 at 09:05
  • 1
    Ah, I might've been on a slightly older version. I'll update the answer to reflect – Chris Feb 02 '23 at 09:06