Custom radio buttons example does not work in TypeScript

🐛 Bug report

I’m trying to use the Chakra UI custom radio buttons example for my TypeScript React project.

💥 Steps to reproduce

Copy the example component into your project, adding the necessary props type:

function RadioCard(props: PropsWithChildren<UseRadioProps>) {
    const { getInputProps, getCheckboxProps } = useRadio(props);

    const input = getInputProps();
    const checkbox = getCheckboxProps();

    return (
        <Box as="label">
            <input {...input} />
            <Box
                {...checkbox}
                cursor="pointer"
                borderWidth="1px"
                borderRadius="md"
                boxShadow="md"
                _checked={{
                    bg: "teal.600",
                    color: "white",
                    borderColor: "teal.600",
                }}
                _focus={{
                    boxShadow: "outline",
                }}
                px={5}
                py={3}
            >
                {props.children}
            </Box>
        </Box>
    );
}

Experience the following compilation error:

error TS2322: Type '{ children: ReactNode; cursor: "pointer"; borderWidth: "1px"; borderRadius: "md"; boxShadow: "md"; _checked: 
{ bg: string; color: string; borderColor: string; }; _focus: { boxShadow: string; }; ... 256 more ...; css?: CSSProp<...> | undefined; }' is not assignable to type 'ChakraProps'.
    Types of property 'css' are incompatible.
      Type 'CSSProp<any> | undefined' is not assignable to type 'Interpolation<{}>'.
        Type 'FlattenInterpolation<ThemeProps<any>>' is not assignable to type 'Interpolation<{}>'.
          Type 'readonly Interpolation<ThemeProps<any>>[]' is missing the following properties from type 'ArrayInterpolation<{}>': pop, push, reverse, shift, and 6 more.

🧐 Expected behavior

The example should work in a TypeScript project.

🌍 System information

Software	Version(s)
Chakra UI	1.6.1
Browser	N/A
Operating System	Windows

📝 Additional information

[segunadebayo]

Hi @rossng,

This error is very common when you have multiple instances of emotion in node_modules. Storybook is usually the suspect here since they use the older versions of emotion which pollutes the TS namespace with that css type definition.

I’d recommend creating a .yarnclean file and include @emotion/core/types to fix that type definition. You can so try @CaitlinSweeney’s solution (thank you, Caitlin!)

If the issue persists, please send a reproduction link.

[CaitlinSweeney]

I’ll leave this here if it helps someone else, not sure what your children look like-

interface YourProps extends UseRadioProps {
  children: React.ReactElement | string;
}

const RadioCheck = (props: YourProps): React.ReactElement => {
  const { getInputProps, getCheckboxProps } = useRadio(props);
  const input = getInputProps();
  const { children, isChecked } = props;

I think I had a similar error @mjgwood. Did you try using the UseRadioProps?

Also, check to make sure your value is a string, ie: {...getRadioProps({ value: someValue.toString() })}