如何将 MUI 主题与汇总捆绑在一起答案

【问题标题】：How do I bundle MUI theme with rollup如何将 MUI 主题与汇总捆绑在一起
【发布时间】：2021-10-22 10:12:12
【问题描述】：

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

结构看起来像

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"，我不会得到正确的颜色。我也没有主题中的任何基本样式。

我无法弄清楚如何将这个主题融入我与 rollup 捆绑的组件中。最后，这是我的汇总配置。

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"],
    }),
  ],
};

【问题讨论】：

标签： reactjs material-ui styled-components rollupjs

【解决方案1】：

对于任何偶然发现此问题并对答案感到好奇的人。这就是我最终要做的。希望这是正确的解决方案。有一件事很糟糕，我最终得到MUI ThemeProvider 给我它生成的类名。这意味着在我的样式组件中，我偶尔需要这样做来定位 [class^="MuiSvgIcon-root"]，但也许我可以通过 props 访问该类，但仍然会弄乱它。无论如何，这是按钮。

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

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

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

const Button = ({
  error,
  size,
  variant,
  endIcon,
  children,
  className,
  ...rest
}: MyButtonProps) => {
  if (className && error) {
    className += " error";
  } else if (!className && error) {
    className = "error";
  }

  return (
    <ThemeProvider theme={theme}>
      <StyledButton
        {...rest}
        variant={variant}
        size={size}
        endIcon={endIcon}
        className={className}
      >
        {children}
      </StyledButton>
    </ThemeProvider>
  );
};

export default Button;

我猜每个组件都需要包装。

【讨论】：