css - 范围 v5 MUI 样式

Question

我们有一个遗留应用程序，我们正在慢慢迁移到 React 和 MUI。为了防止应用程序中未转换的不同部分之间的样式重叠，反之亦然，我们通过结合使用 id 选择器和后代选择器来限定样式范围。例如，我们的样式如下所示:

我们样式的示例输出:

这使我们能够防止遗留样式影响新样式，并防止新样式影响旧样式。在 MUI v5 发布之前，我们可以使用自定义 JSS 插件并在 id 选择器前面添加。但是，我们正在尝试升级 MUI 并完全淘汰 JSS。有没有办法使用支持的样式引擎对 v5 执行此操作？

提前感谢您的帮助。

Answer 1

我也有相同的用例，但 stylis-plugin-extra-scope 对我们没有帮助，因为它只支持 Stylis 3，但 MUI v5 使用的是 Stylis 4。

所以，我像下面这样添加了 Stylis 4 的插件。

它对我有用，但我只是为我做的，我不确定它是否对你有用。

import createCache from '@emotion/cache'
import { CacheProvider } from '@emotion/react'

const continerId = 'myContainerId'
const container = document.getElementById('div')
const root = createRoot(container)

const cache = createCache({
  key: 'ScopedSelector',
  stylisPlugins: [
    (element) => {
      // if it is a class selector, add the selector like '#myContainerId '
      if (element.type === 'rule' && Array.isArray(element.props)) {
        element.props = element.props.map((prop) =>
          prop.startsWith('.') ? `#${containerId} ${prop}` : prop
        )
      }
    },
  ],
})

root.render(
  <CacheProvider value={cache}>
    {/* Any Your Components */}
  </CacheProvider>
)