我一直在努力将我们现有的 React FE 组件从主存储库中拉出，并将其放入一个单独的存储库中，并与汇总捆绑在一起。我们的旧代码使用的是 makeStyles ，我已经将其切换到 styled-components ，但仍保留以前的 MUI 主题。我已经设置了 Storybook，并将其包装在样式化组件主题提供程序中，以便访问样式化组件内的主题。

结构看起来像

components
  \src
    index.ts(imports and exports components)
    \theme(MUI theme)
    \components
      \buttons
        button.tsx(react button code)
        index.ts(imports and exports button)
  \lib(rollup spits this out)

最后，回答这个问题。在我将所有内容与汇总捆绑在一起后，我执行了 NPM 安装，并将其导入到另一个项目中。问题是，我没有在导入的组件中获得正确的主题。这是我的按钮的一个稍微简化的版本。

import React from "react";
import { Button as MaterialButton, ButtonProps } from "@material-ui/core";
import styled from "styled-components";

export interface MyButtonProps extends ButtonProps {
  error?: boolean;
  target?: string;
}

const StyledButton = styled(MaterialButton)`
  &.error {
    background: ${(props) => props.theme.palette.error.main};
    color: #fff;
    &:hover {
      background: ${(props) => props.theme.palette.error.main};
    }
  }
`;

const Button = ({
  error,
  className,
  ...rest}: MyButtonProps) => {
  className += error ? " error" : "";
  return (
    <StyledButton
      {...rest}
      className={className}
    >
      {children}
    </StyledButton>
  );
};

export default Button;

因此，如果我在按钮上放置 error 属性，我确实会从我的主题中获得正确的颜色。但是，如果我输入 color="primary" ，则无法获得正确的颜色。我也没有主题中的任何基本样式。

我还没能弄清楚如何将此主题放入我与汇总捆绑的组件中。最后，这是我的汇总配置。

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import postcss from "rollup-plugin-postcss";
import svg from "rollup-plugin-svg-import";

const packageJson = require("./package.json");

export default {
  input: "src/index.ts",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true,
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true,
    },
  ],
  plugins: [
    peerDepsExternal(),
    resolve(),
    commonjs(),
    svg(),
    typescript({ useTsconfigDeclarationDir: true }),
    postcss({
      extensions: [".css"],
    }),
  ],
};