Re-exporting MUI components from React component library

Question

I'm setting up a component library with React, Storybook, Typescript and Material UI. One of the main targets of the library is to re-export components that are imported from MUI (with a bit of config on top of them). I stumbled upon an issue where one of the components is not being rendered as intended when used in another React app. The component I am talking about is the Stepper component. Below is what I have now:

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

This is going to be built as a library using rollup. I am not going to paste the entire rollup config here, but these are the plugins the config is using:

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

After the process of building and publishing the library to an npm registry, I am trying to use it in some other React application, but some of the styles/internal components of the Stepper are totally missing (ex: active step css, step connectors etc.). The usage of the Stepper component is the same as in the official docs and it works perfectly with the original Stepper component.

Can you think of any configuration I am missing? It looks like something is lost along the way while building the library, but not sure what. Either that or the children components do not receive props properly. I can provide further insight into this if necessary, but I didn't want to clutter the post anymore that it already is.

Answer 1

The Stepper component expects two or more Step components as children. To fix this, you need to pass props.children to the Stepper component.

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;