如何在React Admin应用中集成Storybook自定义组件并解决主题冲突与报错问题？

Hey there! Let's break down what's going on here and get those custom components working in your React Admin app without theme clashes.

First, let's unpack that error:

Uncaught TypeError: Cannot read property 'white' of undefined at push.../../../libs/ui/src/lib/input/Checkbox.tsx.styled_components__WEBPACK_IMPORTED_MODULE_1__.default.label.withConfig.theme.theme

This means your custom Checkbox component is trying to access a value like theme.theme.white, but the theme object available in the React Admin context doesn't have that structure. React Admin uses Material UI's ThemeProvider under the hood, while your Storybook components are built with styled-components' own theme system—these two don't automatically share theme data, hence the conflict.

Here are three actionable solutions to fix this:

1. Isolate Custom Components with Styled Components' ThemeProvider #

The quickest fix is to wrap your custom components in the styled-components ThemeProvider and pass in the exact theme they expect (the same one you used in Storybook). This keeps your custom components' theme completely separate from React Admin's.

import { ThemeProvider } from 'styled-components';
// Import your custom theme from your UI library
import { customTheme, Checkbox } from '@mylibrary/ui';
import { TextField } from 'react-admin';

const MyAdminPage = () => {
  return (
    <div>
      {/* React Admin components work normally with their own theme */}
      <TextField source="userName" />
      
      {/* Wrap your custom component with its required theme */}
      <ThemeProvider theme={customTheme}>
        <Checkbox label="Accept Terms" />
      </ThemeProvider>
    </div>
  );
};

If you're using these components often, you can create a reusable wrapper component to avoid repeating the ThemeProvider every time.

2. Merge Themes for Unified Styling #

If you want your custom components to align with React Admin's theme (instead of using their own), you can merge your custom theme properties into React Admin's Material UI theme.

First, update your React Admin theme configuration to include your custom theme values:

import { createTheme } from '@mui/material/styles';
import { defaultTheme } from 'react-admin';

// Merge React Admin's default theme with your custom theme properties
const mergedTheme = createTheme({
  ...defaultTheme,
  // Add the exact theme structure your custom components expect
  theme: {
    white: '#ffffff',
    // Include other custom colors/styles your components need
  }
});

Then, update your custom components to read from this merged theme structure (instead of expecting a separate styled-components theme). This way, they'll pull values from React Admin's theme context automatically.

3. Reuse Your Storybook Theme Setup #

Your Storybook config already has the theme setup working for these components—you can replicate that in React Admin. Check your Storybook's .storybook/preview.js file; you'll likely see a decorator like this:

import { ThemeProvider } from 'styled-components';
import { customTheme } from '../src/lib/theme';

export const decorators = [
  (Story) => (
    <ThemeProvider theme={customTheme}>
      <Story />
    </ThemeProvider>
  ),
];

Copy this pattern directly into your React Admin app—wrap any page or component that uses your custom UI library components with this ThemeProvider to mirror the Storybook environment.

Content的提问来源于stack exchange，提问作者Isabella Ramírez