React JS: повторно используемые и модифицируемые компоненты пользовательского интерфейса?

Question

Я только начал работать над проектом и решил использовать пакет ant design. Я хочу создавать повторно используемые и модифицируемые компоненты. Например, я хочу создать компонент кнопки и использовать его во всем приложении вместо непосредственного использования компонента кнопки antd. Поэтому, если я решил изменить внешний вид кнопки, я просто изменил созданный мной компонент кнопки. Поэтому, если я решил использовать другой пакет пользовательского интерфейса, мне просто нужно изменить компонент кнопки или его стиль, а не менять его во всем приложении. Я на самом деле back-end разработчик и не очень разбираюсь в front-end. Я хочу знать, правильный ли мой подход или нет. Я спрашиваю, потому что приведенный ниже код не кажется мне правильным:

import React from 'react';
import { Button } from 'antd';


function myButton(props) {
  return (
    <Button {...props}>
      {props.children}
    </Button>
  );
}

export default myButton;

В других файлах:

import { Button } from './components/button';

Вместо:

import { Button } from 'antd';

Должен ли я использовать этот подход таким образом или расширить эти компоненты без изменений (или экспортировать их непосредственно из каталога компонентов)?