1

您能帮忙解决以下问题吗？

  • 我们在一个拥有 2 个不同项目的团队中使用 Ionic 和 React。
  • 我们需要对这些 Ionic 组件进行一些不同的样式设置。
  • 我需要与另一个团队共享这些风格略有不同的 Ionic 组件，以便代码重用。
  • 我想用 Storybook 向 UX 团队展示这些风格化的 Ionic 组件，并说“这就是按钮的样子”

首先，我只是在一个 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 使用它。

但是，我不喜欢：

a) 将名称从“IonButton”更改为“MyIonButton”

b) 必须包装每个 Ionic 组件，如上所示

我希望自己和其他团队以标准方式使用 Ionic 组件，例如

import { IonButton } from "@ionic/react";
...
<IonButton>Close</IonButton>

但是让这些基础构建块/组件以某种方式样式化。

请您向我描述正确的方法好吗？非常感谢您的时间

4

0 回答 0