0

I'd like to override the text color of my Component to make it a multi-stop linear gradient. Following the code examples provided by Framer, this is what I've tried:

export const withCustomColor = (Component): ComponentType => {
    // This part of the code is only run once when creating the component
    return (props) => {
        // This part runs every time the component is rendered.
        return (
            <Component
                {...props}
                color="linear-gradient(70deg, #7F00FF, #00EAFF, #FFF700, #FF007B)"
            />
        )
    }
}

This does nothing. If I instead do the following, I get the linear gradient but as a background block, not the actual text color:

            <Component
                {...props}
                animate={{
                    background:
                        "linear-gradient(70deg, #7F00FF, #00EAFF, #FFF700, #FF007B)",
                }}
            />

But putting color inside the animate brackets does nothing.

How can I change the text color to be the linear gradient using Framer overrides?

UserDude
  • 323
  • 1
  • 3
  • 18
  • Just guessing, but give this a try: `style={{color: "linear-gradient(70deg, #7F00FF, #00EAFF, #FFF700, #FF007B)"}}` inside ``. It should be noted that this would then completely override any `style=` that may be in `props`, if that happens then you'll need to get the style from props and then add `color` to it. – Peter B May 18 '23 at 00:07
  • 1
    That isn't a valid [`color` property value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). To make the text color a gradient, you could try adding the necessary styles from one of the answers [here](https://stackoverflow.com/questions/8384751/css-text-gradient) – segFault May 18 '23 at 01:06

0 Answers0