Я хочу создать собственный RadioButton с помощью framer-motion

Question

Мы используем реакцию и машинопись.
Библиотека дизайна - chakra-ui.
Мы используем framer-motion для анимации.

Что я хочу делать
Я хочу создать оригинальные переключатели. Поведение RadioButton
Когда пользователь наводит указатель мыши на кнопку → переключатель становится синим (значок флажка не отображается).
При нажатии переключателя → переключатель становится синим, и отображается значок флажка (анимация реализована в кадре- движение применяется.)

Текущее поведение переключателя
При наведении на кнопку → Цвет не меняется на синий.
При нажатии переключателя → Анимация, реализованная с помощью framer-motion, не применяется к значку галочки.

Если кто может мне помочь, ответьте пожалуйста.

      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>
  );
};

      import { useState } from 'react';
import { RadioProps, useRadio } from '@chakra-ui/radio';
import { Icon,Box } from '@chakra-ui/react';
import { motion, useMotionValue, HTMLMotionProps } from 'framer-motion';
import { HTMLChakraProps, chakra } from '@chakra-ui/react';
type Merge<P, T> = Omit<P, keyof T> & T;
type MotionBoxProps = Merge<HTMLChakraProps<'div'>, HTMLMotionProps<'div'>>;

export const MotionBox: React.FC<MotionBoxProps> = motion(chakra.div);

export const Radio: React.FunctionComponent<RadioProps> = (props) => {
  const { getInputProps, getCheckboxProps } = useRadio(props);

  const input = getInputProps();
  const checkbox = getCheckboxProps();
  const [isChecked, setIsChecked] = useState(false);
  return (
    <>
      <MotionBox
        position="relative"
        as="label"
        whileTap={{
          scale: 0.95,
          borderRadius: '100%',
        }}
        whileHover={{
          scale: 1.05,
        }}
        onTap={() => setIsChecked(!isChecked)}
      >
        <input {...input} />
        <Box
          {...checkbox}
          cursor="pointer"
          borderWidth="1px"
          borderRadius="100%"
          boxShadow="md"
          _checked={{
            bg: 'blue.100',
            color: 'white',
            borderColor: 'blue.100',
          }}
          _focus={{
            boxShadow: 'outline',
          }}
          _hover={{
            background: 'blue.100',
          }}
          px={7}
          py={7}
        >
          {props.children}
        </Box>
        <MotionBox
          position="absolute"
          top={3}
          left={3}
          style={{
            originX: 0,
            originY: 1,
          }}
          initial={{ opacity: 0, scale: 0.1 }}
          animate={{
            opacity: 1,
            scale: 1,
          }}
          transition={{
            duration: 3,
          }}
        >
          <Icon fontSize={'35px'}>
            <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"
            />
          </Icon>
        </MotionBox>
      </MotionBox>
    </>
  );
};

Answer 1

You need to rebase your codes to it uses motion.div.

For example, for your background color to change.

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

If you use the following, the div background will change, but it will not affect the background of the button unless u set style {{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>

Simple example https://codesandbox.io/s/cocky-kapitsa-nl5bs

For SVG it's the same thing.

       <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>

If you want to animate individual paths you need to convert it to 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>