I am developing an UI framework based on antd (I call it Yooooo UI)

The design is a little different with the default style of antd and I did something to set the different color, size, margin and blablabla with setting less variables - follow the official solution.

Also, there is something new, such as I extend the type of Buttons - add 'atype', 'btype', 'ctype' to Button Component. That means I can use it like

import { Button } from 'yooooo-ui';

<Button type="atype" />

The solution for supporting this is here below

import { ButtonType } from 'antd/lib/button';
import { BaseButtonProps } from 'antd/lib/button/button';

const ExtendedButtonTypes = tuple(
  'atype',
  'btype',
  'ctype'
);

type ExtendButtonType = typeof ExtendedButtonTypes[number];
type MyButtonType = ButtonType | ExtendButtonType;

interface MyBaseButtonProps extends Omit<BaseButtonProps, 'type'> {
  type?: MyButtonType;
}

// ...something else codes

But there is a condition that Modal component used the Button component with a relative path in antd.

// codes in antd
import { ButtonProps } from './button'
// ...something else

that means, if I do nothing in Yoooo UI and use the Modal component, the button type 'atype' is invalid since Modal component doesn't use my customized Button component

import { Modal } from 'yoooo-ui';

const buttonProps = {
  type: 'atype' // <-- error happened
}

<Modal
  okButtonProps={buttonProps}
/>

I wanna figure out a way to handle this condition with a commonly way.