Javascript 在JSS中MUI全局类名的可靠性如何？

我有这样的代码：

const formControlStyles = {
  root: {
    '&:hover .MuiFormLabel-root': {

     }
  }
}

---

在主题重写中使用类名访问其他组件是否安全？此外，是否有一种JSS方法可以从其他组件嵌套样式？

这是相当安全的，但有一点需要注意。如果利用嵌套主题，则嵌套主题中应用的全局类名将具有不可预测的后缀（例如

MuiFormLabel-root-371

）。此后缀是必要的，因为与嵌套主题关联的默认样式可能不同

为了以完全安全的方式针对类名，您可以使用

*=

（例如

[class*=“MuiFormLabel root”]

）来检查元素是否有包含

MuiFormLabel root

的类名，而无需精确匹配它。您可以在材质UI本身中看到这种方法

只要您不打算使用嵌套主题，就可以使用更简单的语法来精确匹配全局类名，这是安全的（而且可读性更高）。另一种方法是在嵌套组件上指定一个JSS类，并使用的JSS语法引用该类（例如，在我的示例中，

$myFormLabel

），但这需要能够将该类（例如，在我的示例中，

classes.myFormLabel

）应用于嵌套组件

下面的示例演示了使用嵌套主题时的问题（以及一些可能的解决方案）

import React from "react";
import {
  ThemeProvider,
  createMuiTheme,
  makeStyles
} from "@material-ui/core/styles";
import FormLabel from "@material-ui/core/FormLabel";

const theme1 = createMuiTheme();
const theme2 = createMuiTheme({
  overrides: {
    MuiFormLabel: {
      root: {
        color: "#00ff00"
      }
    }
  }
});

const useStyles = makeStyles({
  mostlySafe: {
    "&:hover .MuiFormLabel-root": {
      color: "red"
    }
  },
  safeButTediousAndMoreErrorProneSyntax: {
    '&:hover [class*="MuiFormLabel-root"]': {
      color: "purple"
    }
  },
  alternativeApproach: {
    "&:hover $myFormLabel": {
      color: "blue"
    }
  },
  myFormLabel: {}
});
export default function App() {
  const classes = useStyles();
  return (
    <ThemeProvider theme={theme1}>
      <div>
        <div className={classes.mostlySafe}>
          <FormLabel>FormLabel within top-level theme</FormLabel>
        </div>
        <ThemeProvider theme={theme2}>
          <div className={classes.mostlySafe}>
            <FormLabel>
              FormLabel within nested theme (hover styling doesn't work)
            </FormLabel>
          </div>
          <div className={classes.safeButTediousAndMoreErrorProneSyntax}>
            <FormLabel>
              FormLabel within nested theme using safe approach
            </FormLabel>
          </div>
          <div className={classes.alternativeApproach}>
            <FormLabel className={classes.myFormLabel}>
              FormLabel within nested theme without using global class names
            </FormLabel>
          </div>
        </ThemeProvider>
      </div>
    </ThemeProvider>
  );
}

从“React”导入React；
进口{
提供者，
创造博物馆，
制作风格
}来自“@material ui/core/styles”；
从“@material ui/core/FormLabel”导入FormLabel；
const theme1=createMuiTheme（）；
const theme2=createMuiTheme({
覆盖：{
MUI标签：{
根目录：{
颜色：“00ff00”
}
}
}
});
const useStyles=makeStyles({
最重要的是：{
“&：hover.MuiFormLabel根”：{
颜色：“红色”
}
},
SafeButted和More ErrorProneSyntax：{
“&:hover[class*=“MuiFormLabel根”]：{
颜色：“紫色”
}
},
替代方法：{
“&：悬停$myFormLabel”：{
颜色：“蓝色”
}
},
myFormLabel:{}
});
导出默认函数App（）{
const classes=useStyles（）；
返回(
顶级主题中的FormLabel
嵌套主题中的FormLabel（悬停样式无效）
使用安全方法嵌套主题中的FormLabel
嵌套主题中的FormLabel，不使用全局类名
);
}

---

谢谢您的帮助！在您的回答之后，有一个问题一直困扰着我（特别是MUI的自动完成组件实现）。如果

disableGlobal

设置为

true

，会发生什么情况？自动完成组件是否会中断？风格是无法访问的吗？@Gasim这是一个有趣的观点。是，如果

disableGlobal

设置为

true

，则会中断

自动完成

样式设置。在v5中，计划将JS替换为样式化组件，作为内部使用的样式化解决方案。我还不知道这将意味着什么，但我怀疑MUI将更加依赖全局类名，而不是更少。我怀疑

disableGlobal

的选项将完全消失。@Gasim仅供参考-

disableGlobal

发挥作用的代码参考：。