Как опубликовать пользовательские компоненты Ionic в bit.dev
Не могли бы вы помочь со следующим?
- Мы используем Ionic с React в команде, имеющей 2 разных проекта.
- Нам нужно немного по-другому стилизовать эти ионные компоненты.
- Мне нужно поделиться этими немного отличающимися стилями ионных компонентов с другой командой для повторного использования кода.
- Я хотел бы продемонстрировать эти стилизованные ионные компоненты с помощью Storybook команде UX и сказать: "вот как выглядит кнопка"
Для начала я просто добавил стиль в файл css и импортировал этот файл на корневую страницу React.
Но было бы неплохо просто инкапсулировать компонент + стиль в повторно используемый изолированный компонент, который другие люди могут повторно использовать без необходимости импортировать пользовательские файлы css.
Я думаю о:
import { IonButton } from "@ionic/react";
import styled from "styled-components";
const StyledIonButton = styled(IonButton)`
// some custom css styling here
`;
const MyIonButton = () => <StyledIonButton {...props} />;
export default MyIonButton;
Теперь я могу отслеживать / экспортировать вышеуказанный компонент, используя, например, Bit.dev, а другая команда использует его с помощью npm-install.
Однако мне не нравятся:
а) изменение имени с "IonButton" на "MyIonButton"
б) необходимость обертывать каждый ионный компонент, как показано выше
Я бы хотел, чтобы я и другая команда просто использовали компоненты Ionic стандартным способом, например
import { IonButton } from "@ionic/react";
...
<IonButton>Close</IonButton>
НО, имея эти базовые строительные блоки / компоненты определенным образом.
Не могли бы вы описать мне правильный подход? Большое спасибо за ваше время