从React组件库再导出MUI组件

Question

我正在建立一个组件库的反应，故事簿，打字稿和材料用户界面。库的主要目标之一是重新导出从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

这将作为一个库使用rollup构建。我不打算在这里粘贴整个rollup配置，但下面是配置所使用的插件：

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注册中心的过程之后，我尝试在其他一些反应应用程序中使用它，但是步骤的一些样式/内部组件完全丢失(例如: active step css、step连接器等)。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

在这里回答我自己的问题:每当我们在内部处理使用上下文API的组件时，都会遇到这种行为。不知何故，如果我们使用库中的根组件和MUI的其他子代组件，那么上下文就会变得一团糟。只需导入和再导出后代组件，并从owr库中使用它们，也可以解决这个问题，尽管我希望避免这种问题。在此之前，我在github页面上创建了一个问题，看看它是他们一方的一个bug，还是影响我在这里的情况的一个预期行为。总之，这并不是真正的rollup配置问题。转换和捆绑工作按计划进行。

发行链接：https://github.com/mui/material-ui/issues/33320