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

Question

我有一个使用 Material UI 及其主题提供程序(使用 JSS)的应用程序。

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

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

但是，它确实可以让您通过渲染时调用的回调直接访问 DOM 元素(例如 eventRender method )。

Here's a basic demo sandbox.

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

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

或者 - I could implement a Bootstrap theme - as suggested in their documentation.

但是这些解决方案的问题在于:

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 主题中获取样式并使用 react-helmet 生成基于它的 style 标签。 。为了更好地完成该事件，我创建了一个执行 map 的“包装器”组件。我只实现了主要规则，但它可以扩展到所有其他规则。

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

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