使用 react-planet 时组件中的多个 jss 会覆盖其他组件的样式

Question

我将 <Planet/>（来自 react-planet）添加到我的应用程序中，一些 <Grid/>（来自 Material UI）组件的位置发生了变化.

在 DevTool 中查看“Elements”时，我注意到 <Planet/> 组件中的 divs 有两个 classes jss3 和 jss{i}，其中i是下一个整数。每个都有不同的属性，这些属性会覆盖 App 中使用 jss{i} classes 之一的每个组件。

我还注意到，首先渲染 i 迭代，适用于新创建的 div 中使用的 jss{i}，从 1 开始到 9 结束 - 因为我有 6行星因此 1 个用于主 div，2 个用于中心行星，3 个用于 div 的第一个 class，以及 4-9 个用于六个 div 的第二个 class。在第二次渲染数字从 10 变为 18 后。

Elements 的屏幕截图位于 first render and second。

The class ={jss3 jss4} example

The class ={jss3 jss5} example

我假设 <Planet/> 创建行星后，其 children 有两个 class，新创建的 class jss{i}，基于 makeStyles-root-{i}，正在覆盖 jss{i} 的属性，<Grid/> 组件在页面的其他地方使用它，从而改变整个页面的位置。

使用 <Planet/> 组件的代码：

return (
    <Grid
      item
      container
      justifyContent = "center"
      style = {{ margin: 30 }}
    >
      <Planet
        centerContent={
          <Fab size="small" color="primary" aria-label="add" onClick={handleOpen}>
            <AddIcon />
          </Fab>
        }
        open={isOpen}
        autoClose
        orbitRadius= {50}
        rotation = {90}
        hideOrbit
        friction = {20}
      >
        <div/>
        <div/>
        <div/>
        <Fab size="small" color="primary" aria-label="addBarIcon" onClick={handleChartAddLineChart}>
          <ShowChartIcon />
        </Fab>
        <Fab size="small" color="primary" aria-label="addBarIcon" onClick={handleChartAddBarChart}>
          <BarChartIcon />
        </Fab>
        <Fab size="small" color="primary" aria-label="addBarIcon" onClick={handleChartAddPieChart}>
          <PieChartIcon />
        </Fab>
      </Planet>
    </Grid>
  );

我尝试只将 <div/> 个组件放入 <Planet/> 但没有任何改变。从 <Grid/> 更改为正常 <div/>，也没有任何改变。另外，我试图在 Whosebug 或其他地方找到类似的问题，但我不确定如何使用正确的关键字来描述问题。

我不确定是 react-planet 库中的某些错误导致 react-planet 和 material-ui 无法一起使用，还是我的代码中存在问题。

Answer 1

我不确定“在一个组件中乘以 class”错误的确切原因，但我从 react-planet 存储库中复制了 Planet.tsx and Orbit.tsx 并更改了一些代码，去掉makeStyles 和问题解决。可能是 react-planet 中所有这些组件中嵌套的 makeStyles 在不同的组件渲染级别相互冲突，导致它在一个对象中渲染多次。

此外，由于从 MUI makeStyle 到 css class 的简化 class 命名，它覆盖了 Material UI 组件样式在构建产品时 (makeStyles-root-{i} -> jss{i}, makeStyles -> jss).

覆盖样式可能是由 old/different MUI 版本的 react-planets 依赖性引起的，而不是我为每个版本创建两个样式生成器的其余代码MUI FAQ 中提到。第一个生成器从 makeStyle 创建 class 我所有的页面命名每个 class jss{i++} for i 从 i=1 开始并在所有 classes 被重命名时结束，然后反应-planet 生成器为其对象创建样式，从 i=1 开始命名每个 class jss{i++} 导致用新属性覆盖之前的每个 class=jss{i}。

使用 react-planet 时组件中的多个 jss 会覆盖其他组件的样式

Multiple jss in components when using react-planet which override other components' styles

material-ui

jss

react-hooks