[英]How reliable are MUI Global Class names in JSS?
我有这样的代码:
const formControlStyles = {
root: {
'&:hover .MuiFormLabel-root': {
}
}
}
在主题覆盖中使用类名来访问其他组件是否安全? 另外,是否有一种 JSS 方式可以从其他组件中嵌套样式?
v5 的更新这个答案最初是关于 Material-UI 的 v4 编写的。 在 v5 中,Material-UI 不再使用全局类名来应用默认样式——用于默认样式的类具有由 Emotion 生成的类名。 全局类名仍然适用,但它们不再受嵌套主题的影响,因此在 v5 中利用全局类名进行覆盖是完全安全的,而无需使用[class*=...
下面回答。
使用全局类名是相当安全的,但有一个警告(在 v4 中)。 如果您利用嵌套主题,嵌套主题中应用的全局类名称将具有不可预测的后缀(例如MuiFormLabel-root-371
)。 此后缀是必要的,因为与嵌套主题关联的默认样式可能不同。
为了以完全安全的方式定位类名,您可以使用*=
属性选择器(例如[class*="MuiFormLabel-root"]
),它检查元素是否具有包含MuiFormLabel-root
的类名而不是需要完全匹配它。 您可以在此处查看Material-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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.