首页 > 解决方案 > 如何在 Chakra UI 主题中设置自定义过渡

问题描述

我想创建这样的主题:

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

然后就像使用我的过渡一样

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

或类似的东西,但我不能像在jsx中使用变量那样真正定义它。有没有办法做到这一点?

标签: javascriptreactjschakra-ui

解决方案


推荐阅读