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

Question

我正在建立一个包含 React、Storybook、Typescript 和 Material UI 的组件库。 该库的主要目标之一是重新导出从 MUI 导入的组件（上面有一些配置）。 我偶然发现了一个问题，即其中一个组件在另一个 React 应用程序中使用时未按预期呈现。 我说的组件是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 组件完美配合。

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

Answer 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;

Answer 2

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

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