从 React 组件库重新导出 MUI 组件答案

【问题标题】：Re-exporting MUI components from React component library从 React 组件库重新导出 MUI 组件
【发布时间】：2022-06-28 20:59:26
【问题描述】：

我正在建立一个包含 React、Storybook、Typescript 和 Material UI 的组件库。该库的主要目标之一是重新导出从 MUI 导入的组件（上面有一些配置）。我偶然发现了一个问题，其中一个组件在另一个 React 应用程序中使用时没有按预期呈现。我所说的组件是Stepper 组件。以下是我现在拥有的：

Stepper.tsx

import Stack from '@mui/material/Stack';
import MUIStepper, { StepperProps } from '@mui/material/Stepper';

const Stepper = (props: StepperProps) => {
    return (
        <Stack sx={{ width: '100%' }} spacing={4}>
            <MUIStepper {...props}></MUIStepper>
        </Stack>
    );
};

export default Stepper

这将使用汇总构建为一个库。我不会在这里粘贴整个汇总配置，但这些是配置使用的插件：

import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import filesize from 'rollup-plugin-filesize';
import autoprefixer from 'autoprefixer';
import typescript from "rollup-plugin-typescript2";
import dts from "rollup-plugin-dts";

在构建库并将其发布到 npm 注册表的过程之后，我尝试在其他一些 React 应用程序中使用它，但是 Stepper 的一些样式/内部组件完全丢失（例如：活动步骤 css，步连接器等）。 Stepper 组件的用法与官方文档中的一样，与原版的 Stepper 组件完美配合。

你能想到我缺少的任何配置吗？看起来在构建库的过程中丢失了一些东西，但不确定是什么。那个或子组件没有正确接收道具。如有必要，我可以提供进一步的见解，但我不想再把帖子弄得乱七八糟了。

【问题讨论】：

标签： reactjs material-ui storybook rollup

【解决方案1】：

Stepper 组件需要两个或更多 Step 组件作为子组件。要解决此问题，您需要将 props.children 传递给 Stepper 组件。

import Stack from '@mui/material/Stack';
import MUIStepper, { StepperProps } from '@mui/material/Stepper';

const Stepper = (props: StepperProps) => {
    return (
        <Stack sx={{ width: '100%' }} spacing={4}>
            <MUIStepper {...props}>{props.children}</MUIStepper>
        </Stack>
    );
};

export default Stepper;

【讨论】：

恐怕不是这样。在库构建期间，其他一些事情变得一团糟。我在使用它的同一个项目中提取了相同的组件，它工作正常。将不得不进一步研究它。我很可能错过了一些汇总配置/babel 转换。

【解决方案2】：

在这里回答我自己的问题：每当我们处理在内部使用 Context API 的组件时，似乎都会遇到这种行为。不知何故，如果我们使用库中的根组件和 MUI 中的其他后代组件，上下文就会变得混乱。只需导入和重新导出后代组件并从 owr 库中使用它们也可以解决此问题，尽管我想避免这种情况。在那之前，我在 github 页面上创建了一个问题，看看这是否是他们这边的错误，或者只是影响我的案例的预期行为。总而言之，这不是一个真正的汇总配置问题。转译和捆绑按预期工作。

问题链接：https://github.com/mui/material-ui/issues/33320

【讨论】：