01 说明

使用 override 只能改变 text 的内容，要想改变 text 的样式（如颜色、字号等），需使用 codeComponent 来实现。

02 悬浮改变样式

import * as React from "react"
import { Frame, Data } from "framer"
export function HoverChangeColor(props) {
    const { buttonText } = props
    const style = {
        // text color
        color: "white",
        fontSize: 32,
        fontWeight: 900,
        background: "",
        width: 400,
        height: 100,
    }
    return (
        <Frame
            center
            style={style}
            whileHover={{
                color: "yellow",
                fontSize: 48,
                transition: {
                    duration: 0.3,
                },
            }}
        >
            {buttonText}
        </Frame>
    )
}
HoverChangeColor.defaultProps = {
    buttonText: "Text Content",
}

03 点击改变样式

import * as React from "react"
import { Frame } from "framer"
export function TapChangeColor() {
    // 设置 didTap 的默认值为 false 且定义 setDidTap() 方法
    const [didTap, setDidTap] = React.useState(false)
    const style = {
        // text color，didTap 为 true 时为 yellow ，为 false 时为 white
        color: didTap ? "yellow" : "white",
        fontSize: 32,
        fontWeight: 900,
        background: "",
        width: 400,
        height: 100,
    }
    return (
        <Frame
            center
            style={style}
            onTap={() => {
                // 设置 didTap 为相反值
                setDidTap(!didTap)
            }}
        >
            Text Content
        </Frame>
    )
}