Javascript 使用React&；创建自定义单选按钮；福米克

上面的示例是我创建的化身ui组件。 这基本上是一个圆形div元素，它将child作为道具显示在这个圆中。 它还有一个边框，可以通过给一个道具“border=true”来切换

我试图做的是创建一个单选按钮来继承这个UI元素，这样我就可以在formik中使用它，React中的一个表单库

因为我对formik库非常陌生，所以我一直在努力实现这个特性，以便能够有效地将来自formik的验证特性合并到我的ui元素中

这将是我想要实现的最终产品

问题:

我知道实现这一点的一种方法是创建自定义css，但这不是我的目标。达到上述要求的最理想方式是什么

如何让自定义ui与不是本机html输入元素的formik一起工作

请告知

下面是到目前为止我的代码

import React from 'react';
import { DefaultAvatar } from './avatar.style';
import propTypes from 'prop-types';

const Avatar = ({
    imgUrl,
    sizes = 'md',
    bgColor = 'grey',
    border = false,
    borderColor = 'tertiary',
    borderWidth = '0.4rem',
    children,
    className,
    onClick,
}) => {
    return (
        <DefaultAvatar
            imgUrl={imgUrl}
            sizes={sizes}
            bgColor={bgColor}
            border={border}
            borderColor={borderColor}
            borderWidth={borderWidth}
            className={className}
            onClick={onClick}
        >
            {children}
        </DefaultAvatar>
    );
};

Avatar.propTypes = {
    imgUrl: propTypes.string,
    sizes: propTypes.oneOf(['lg', 'md', 'sm', 'xSm']),
    bgColor: propTypes.string,
    border: propTypes.bool,
    borderColor: propTypes.string,
    borderWidth: propTypes.string,
    children: propTypes.node,
    onClick: propTypes.func,
};

export default Avatar;

import styled, { css } from 'styled-components';

const processSizes = (sizes) => {
    switch (sizes) {
        case 'xSm':
            return '2.4rem';
        case 'sm':
            return '4rem';
        case 'md':
            return '5.6rem';
        case 'lg':
            return '10.2rem';
    }
};

export const DefaultAvatar = styled.div`
    ${({
        theme,
        imgUrl,
        sizes,
        bgColor,
        border,
        borderColor,
        borderWidth,
        logoSize,
    }) => {
        return css`
            padding: ${theme.paddings.sm};
            background-color: ${theme.colors[bgColor]};
            border-radius: ${theme.borderRadius.roundedFull};
            width: ${() => processSizes(sizes)};
            height: ${() => processSizes(sizes)};
            border: ${border
                ? `solid ${borderWidth} ${theme.colors[borderColor]}` //TODO proportional borderWidth
                : 'none'};
            background: ${imgUrl
                ? `url(${imgUrl}) no-repeat center`
                : theme.colors[bgColor]};
            background-size: ${() => processSizes(sizes)};
            display: flex;
            justify-content: center;
            align-items: center;

            & > * {
                width: 100%;
                font-size: ${logoSize};
                text-align: center;
                justify-self: center;
                align-self: center;
            }
        `;
    }}
`;