我如何将 Material-UI 托管样式应用于非 Material-ui、非 React 元素？

Question

我有一个应用程序，我在其中使用 Material UI 及其主题提供程序（使用 JSS）。

我现在正在合并fullcalendar-react，它并不是一个真正成熟的 React 库——它只是一个围绕原始 fullcalendar 代码的薄 React 组件包装器。

也就是说，我无法访问诸如渲染道具之类的东西来控制它如何设置其元素的样式。

但是，它确实让您可以通过在呈现它们时调用的回调（例如eventRender 方法）直接访问 DOM 元素。

这是一个基本的演示沙箱。

现在我想要做的是使完整日历组件（例如，按钮）与我的应用程序的其余部分共享相同的外观和感觉。

一种方法是，我可以通过查看它使用的类名并相应地实现样式来手动覆盖所有样式。

或者 -我可以实现一个 Bootstrap 主题 - 正如他们的文档中所建议的那样。

但是这些解决方案中的任何一个的问题在于：

1. 这将是很多工作
2. 我会遇到同步问题，如果我更改了我的 MUI 主题并忘记更新日历主题，它们看起来会有所不同。

我想做的是：

• 神奇地将 MUI 主题转换为 Bootstrap 主题。
• 或者在 MUI 类名和日历类名之间创建一个映射，例如：

.fc-button = .MuiButtonBase-root.MuiButton-root.MuiButton-contained
.fc-button-primary= .MuiButton-containedPrimary

我不介意必须按摩选择器等以使其工作（例如 - MUI 按钮有两个内部跨度，而完整日历只有一个）。这主要是关于我何时更改主题 - 不想在两个地方更改它。

使用像 Sass 之类的东西和它的@extend语法就是我的想法。我可以很容易地使用 Sass 创建完整的日历 CSS - 但是 Sass 如何访问 MuiTheme？

也许我可以采取相反的方法 - 告诉 MUI '嘿，这里的这些类名的样式应该像这些 MUI 类一样'。

关于我如何解决这个问题的任何具体建议？

Answer 1

这是我的建议（显然，这不是直截了当的）。从 MUI 主题中获取样式并style使用react-helmet. 为了更好地完成该事件，我创建了一个执行地图的“包装器”组件。我只实现了主要规则，但它可以扩展到所有其他规则。

这样，您在主题中所做的任何更改也会影响映射的选择器。

import React from "react";
import { Helmet } from "react-helmet";

export function MuiAdapter({ theme }) {
  if (!theme.palette) {
    return <></>;
  }
  return (
    <Helmet>
      <style type="text/css">{`
          .fc-button-primary {
            background: ${theme.palette.primary.main}
          }
          /* more styles go here */
      `}</style>
    </Helmet>
  );
}

以及适配器的使用

<MuiAdapter theme={theme} />

工作演示：https://codesandbox.io/s/reverent-mccarthy-3o856