使用react-planet时生成的jss类覆盖Material UI组件样式问题求助

你遇到的是JSS类名前缀冲突问题：react-planet库和Material UI都使用基于JSS的样式方案，默认生成的类名格式均为jss{递增数字}，两个库的类名计数相互独立，一旦生成相同的类名，后渲染的样式就会覆盖先渲染的样式，进而导致原有组件样式异常。
你观察到的jss{i}类名覆盖Grid样式的表现，完全符合该类冲突的典型特征。

按实现成本从低到高排序：

• 方案1：全局修改Material UI的类名前缀（最推荐，改动最小）
  在应用的根组件外层包裹StylesProvider，自定义类名前缀避免和react-planet的默认jss前缀冲突，代码示例如下：

// 如果你使用Material UI v4，导入路径为@material-ui/core/styles
// 如果你使用Material UI v5的兼容JSS包，导入路径为@mui/styles
import { StylesProvider, createGenerateClassName } from '@material-ui/core/styles';

// 生成自定义类名规则，所有MUI生成的类名前缀会改为mui-
const generateClassName = createGenerateClassName({
  productionPrefix: 'mui',
});

function App() {
  return (
    <StylesProvider generateClassName={generateClassName}>
      {/* 此处放置你原有应用的全部根组件代码 */}
    </StylesProvider>
  );
}

修改完成后，MUI生成的类名会变为mui-1、mui-2格式，完全不会和react-planet生成的jss{i}类名重名。

• 方案2：仅修改react-planet组件范围的类名前缀
  如果不想改动全局MUI配置，可以只在用到Planet组件的外层单独包裹StylesProvider，单独为react-planet相关的JSS类名设置独立前缀：

import { StylesProvider, createGenerateClassName } from '@material-ui/core/styles';

const generatePlanetClassName = createGenerateClassName({
  productionPrefix: 'planet',
});

// 你原有使用Planet组件的代码改造后如下
return (
  <Grid
    item
    container
    justifyContent = "center"
    style = {{ margin: 30 }}
  >
    <StylesProvider generateClassName={generatePlanetClassName}>
      <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>
    </StylesProvider>
  </Grid>
);

• 方案3：升级为Material UI v5的默认样式方案
  如果你使用的是Material UI v5版本，可放弃使用兼容包@mui/styles，改用MUI v5默认的emotion作为样式方案，完全脱离JSS体系，从根源上避免JSS类名冲突问题。

你之前尝试的修改DOM结构类方案无效，是因为问题根源和DOM结构无关，是全局样式类名重名导致的覆盖，调整DOM结构无法解决该问题。

内容的提问来源于stack exchange，提问作者Jueltrae