如何解决如何始终覆盖后缀不确定的JSS样式? TLDR; 特别是例如:其他注意事项相关
我正在寻找有关@material-ui/core
的建议,
TLDR;
我希望采用一种一致的方法来处理css-in-js生成的具有不确定数字后缀的className,同时尽可能使用@material-ui/core
的{{1}}函数。
特别是
“ styled()
生成的类名是不确定的”(https://material-ui.com/styles/advanced/#class-names),但是到目前为止,在我公司从事的项目已经使用@material-ui/core/styles
函数包装组件以应用样式。
效果很好,直到我想覆盖伪类之一如何应用于我正在设置样式的根元素之前。在这一点上,如果我尝试使用常规的旧类选择器以特定状态控制样式,则该类上没有后缀即可使用,但是只要JSS生成的className具有数字后缀即可,它就坏了。
当我说“后缀”时,是指组件的根className可能是
styled()
,但是当为该特定实例生成className时,可能会附加一个数字后缀:.makeStyles-root
例如:
组件:.makeStyles-root-123
https://material-ui.com/api/input-label/#inputlabel-api
我想弄弄InputLabel
发生的转换,但随后该转换被.MuiInputLabel-formControl
覆盖。
如果我尝试使用常规的类选择器:
.MuiInputLabel-shrink
仅当JSS类没有后缀时,它才有效
,如果我尝试使用规则名称(export const InputLabel = styled(MuiInputLabel)({
`&.MuiInputLabel-formControl`: {
transform: 'translate(2px,8px) scale(1)',},`&.MuiInputLabel-shrink`: {
transform: 'translate(0) scale(0.6)',});
实际上不支持该规则名称)
styled()
它仅将无效规则应用于元素:
export const InputLabel = styled(MuiInputLabel)({
formControl: {
transform: 'translate(2px,shrink: {
transform: 'translate(0) scale(0.6)',});
我也尝试过传递 formControl: [object Object]
shrink: [object Object];
(但这似乎根本不起作用)
classes
其他注意事项
-
我不想使用主题替代(我想可以在此处使用这些规则),因为我不想将此样式应用于InputLabel的所有实例
-
所以让我倾向于使用hook API / makeStyles():https://material-ui.com/styles/basics/#hook-api
- 但这并不适合采用样式文件的当前模式。
相关
- 我看过这些类似的问题:
- jss to override a material-ui nondeterministic class
- How override material ui style with hooks
- 不同之处在于,我尽可能避免使用hook API。
解决方法
据我所知,styled()
不可能做到这一点,
所以我只讨论了其他帖子所建议和使用的makeStyles()
。
但是我使用了两者的一些混搭,所以我仍然可以将样式保存在单独的文件中。
const useLabelStyles = makeStyles((theme) => ({
root: {
color: theme.text.primary,},formControl: {
transform: 'translate(2px,8px) scale(1)',shrink: {
transform: 'translate(0) scale(0.6)',}));
export const InputLabel = styled((props) => {
const theme = useTheme();
const classes = useLabelStyles(theme);
return (
<MuiInputLabel
classes={classes}
{...props}
/>
);
})({});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。