How to set custom transitions in Chakra UI theme

Viewed 1460

I wanted to create theme like this:

extendTheme({
     textStyles: {
        title: {
            fontSize: "40px",
            fontWeight: "500",
            letterSpacing: '-0.6px',
            lineHeight: '48px'
        }
    },
    transition: {
        custom: {
            property: 'transform',
            duration: '0.5s',
            easing: 'ease-in-out'
        }
    }
})

and then just use my transition like

<Box textStyle={'title'} transition={'custom.transform'} /* or transition='custom', whatever */>

or anything like that, but I can't really define it in the way that I could just use variable in jsx. Is there a way to do it?

0 Answers
Related