How do you style a Title component in Mantine?

Question

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

Answer 1

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.