Reactjs 我想创建一个带有帧运动的自定义单选按钮

我们正在使用react和typescript。
设计库是chakra ui。
我们正在使用帧运动制作动画。
我想做什么
我想创建原始单选按钮。 单选按钮行为
当用户将鼠标悬停在按钮上时→ 单选按钮变为蓝色（不显示复选图标）。
当按下单选按钮时→ 单选按钮变为蓝色，并显示复选图标（应用在帧运动中实现的动画）

当前单选按钮行为
当按钮悬停时→ 颜色不会变为蓝色。
当按下单选按钮时→ 由帧运动实现的动画不会应用于检查图标

如果有人能帮助我，请回答

import React from 'react';
import { Center, VStack, HStack } from '@chakra-ui/layout';
import { Radio } from 'components/Radio';
import { useRadioGroup } from '@chakra-ui/radio';

export const Index: React.FunctionComponent = () => {
  const options = ['1', '2', '3'];
  const { getRootProps, getRadioProps } = useRadioGroup({
    name: 'framework',
    defaultValue: 'react',
    onChange: console.log,
  });
  const group = getRootProps();
  return (
    <Center paddingX={4}>
        <HStack {...group} gridGap={12}>
          {options.map((value) => {
            const radio = getRadioProps({ value });
            return <Radio key={value} {...radio}></Radio>;
          })}
        </HStack>
    </Center>
  );
};

从“React”导入React；
从“@chakra ui/layout”导入{Center，VStack，HStack}；
从“组件/无线电”导入{Radio}；
从“@chakra ui/radio”导入{useRadioGroup}；
导出常量索引：React.FunctionComponent=（）=>{
常量选项=['1'，'2'，'3']；
const{getRootProps，getRadioProps}=useRadioGroup({
名称：'框架'，
defaultValue:'react'，
onChange:console.log，
});
const group=getRootProps（）；
返回(
{options.map（（值）=>{
const radio=getRadioProps（{value}）；
返回；
})}
);
};

从'react'导入{useState}；
从“@chakra ui/radio”导入{RadioProps，useRadio}；
从“@chakra ui/react”导入{Icon，Box}”；
从“帧运动”导入{motion，useMotionValue，HTMLMotionProps}；
从“@chakra ui/react”导入{htmlchakraps，chakra}”；
类型Merge=省略&T；
键入MotionBoxProps=Merge；
导出常量运动框：React.FC=运动（chakra.div）；
导出常量无线电：React.FunctionComponent=（道具）=>{
const{getInputProps，getCheckboxProps}=useRadio（props）；
const input=getInputProps（）；
const checkbox=getCheckboxProps（）；
const[isChecked，setIsChecked]=useState（false）；
返回(
setIsChecked（！isChecked）}
>
{props.children}
);
};

您需要将代码重新设置为使用

motion.div

例如，要更改背景色

<div className="App">
  <motion.div  whileHover={{ backgroundColor: 'rgb(100,0,0)' }} style={{ backgroundColor: 'rgb(255,0,0)'}}>
    Hover Me
  </motion.div>
</div>

盘旋我

如果使用以下命令，div背景将更改，但它不会影响按钮的背景，除非您设置样式{{backgroundColor:'inherit'}

// following button background won't change color

<div className="App">
  <motion.div  whileHover={{ backgroundColor: 'rgb(100,0,0)' }} style={{ backgroundColor: 'rgb(255,0,0)'}}>
    <button>I am a button</button>
  </motion.div>
</div>

//following background of button will change color

<div className="App">
  <motion.div  whileHover={{ backgroundColor: 'rgb(100,0,0)' }} style={{ backgroundColor: 'rgb(255,0,0)'}}>
    <button style={{ backgroundColor: 'inherit' }}>I am a button</button>
  </motion.div>
</div>

//下面的按钮背景不会改变颜色
我是一颗纽扣
//按钮的以下背景将改变颜色
我是一颗纽扣

简单例子

对于SVG来说，这是一样的

 <motion.svg initial={{.... }} animate={{ ..... }} whileHover={{ ..... }}>
     <path d="M9.07903 14.9692L6.17405 12.1096C5.67622 11.6195 4.8712 11.6195 4.37337 12.1096C3.87554 12.5997 3.87554 13.3921 4.37337 13.8822L8.18311 17.6325C8.68094 18.1225 9.48597 18.1225 9.98379 17.6325L19.6266 8.14012C20.1245 7.65006 20.1245 6.8576 19.6266 6.36754C19.1288 5.87749 18.3238 5.87749 17.8259 6.36754L9.07903 14.9692Z"
     fill="#ffffff"
     strokeWidth="0.5"
     stroke="#ffffff"
     />
   </motion.svg>

如果要为各个路径设置动画，则需要将其转换为motion.path

<motion.svg initial={{.... }} animate={{ ..... }} whileHover={{ ..... }}>
     <motion.path d="M9.07903 14.9692L6.17405 12.1096C5.67622 11.6195 4.8712 11.6195 4.37337 12.1096C3.87554 12.5997 3.87554 13.3921 4.37337 13.8822L8.18311 17.6325C8.68094 18.1225 9.48597 18.1225 9.98379 17.6325L19.6266 8.14012C20.1245 7.65006 20.1245 6.8576 19.6266 6.36754C19.1288 5.87749 18.3238 5.87749 17.8259 6.36754L9.07903 14.9692Z"
      initial={{ opacity: 0 }}
      animate={{ fill: "#ffffff", opacity: 1 }}
      strokeWidth="0.5"
      stroke="#ffffff"
                />
 </motion.svg>

当鼠标悬停时，没有看到要更改为蓝色的代码，只看到比例：1.05没有显示什么？我查看了代码沙盒，它显示了列表组件。我想创建的是一个radiobutton.updated来显示正确的代码，所以不能使用div标签，因为我们使用的是chakra UI，所以不能编写css。如果使用div标记，则必须使用css应用样式。然后按自己的方式进行，但如果要更改颜色，请记住继承背景。你不必遵循我们的答案，你可以用它作为指导。我试过了，但它没有改变任何东西。

<motion.svg initial={{.... }} animate={{ ..... }} whileHover={{ ..... }}>
     <motion.path d="M9.07903 14.9692L6.17405 12.1096C5.67622 11.6195 4.8712 11.6195 4.37337 12.1096C3.87554 12.5997 3.87554 13.3921 4.37337 13.8822L8.18311 17.6325C8.68094 18.1225 9.48597 18.1225 9.98379 17.6325L19.6266 8.14012C20.1245 7.65006 20.1245 6.8576 19.6266 6.36754C19.1288 5.87749 18.3238 5.87749 17.8259 6.36754L9.07903 14.9692Z"
      initial={{ opacity: 0 }}
      animate={{ fill: "#ffffff", opacity: 1 }}
      strokeWidth="0.5"
      stroke="#ffffff"
                />
 </motion.svg>