[英]How to combine a regular JSS class with Material-UI's classes override feature using classnames
[英]How to override MUIv4 class globally in JSS for nested themes?
MUIv4 从我的嵌套主题中为我创建了以下类:
<label class="MuiFormLabel-root-121
MuiInputLabel-root-113
MuiInputLabel-formControl-115
MuiInputLabel-animated-118
MuiInputLabel-shrink-117
MuiInputLabel-marginDense-116
MuiInputLabel-outlined-120
Mui-disabled
Mui-disabled
MuiFormLabel-filled-123"
data-shrink="true">Email</label>
现在我有兴趣更改以下 class:
.MuiInputLabel-outlined-120.MuiInputLabel-shrink-117 {
transform: translate(14px, -6px) scale(0.75);
}
因此我有一个主题文件[重复只是为了展示我尝试过的内容]:
createTheme({
overrides: {
MuiInputLabel: {
outlined: {
color: red[500],
backgroundColor:purple[600],
MuiInputLabel: {
shrink: {
transform: "translate(0px, -15px) scale(0.75) !important",
}
},
"&.MuiInputLabel-shrink": {
transform: "translate(0px, -15px) scale(0.75) !important",
},
"&[class*='MuiInputLabel-shrink']":{
transform: "translate(0px, -15px) scale(0.75) !important",
},
}
},
},
})
但没有任何规则有效? 我究竟做错了什么? 如何从 createTheme 查看生成的类名?
编辑 - 我能够使用 CSS Wrapper 实现想要的效果:
const MUIWrapper = styled.div`
[class*="MuiInputLabel-outlined"][class*="MuiInputLabel-shrink"] {
transform: translate(0px, -15px) scale(0.75);
}
}
`
但实际上我不想以这种方式实现它
不知道你为什么要这样构建你的主题(重复MuiInputLabel
)。
请确保主题结构没有重复的覆盖组件。
createTheme({
overrides: {
...
MuiFormLabel: {
outlined: {
...
},
shrink: {
...
}
}
},
})
如果您想在特定组件中设置相同组件的样式,您可以在嵌套主题结构中使用&
和其他 css 技巧。
createTheme({
overrides: {
...
MuiFormLabel: {
outlined: {
'.MuiInputLabel-shrink*': { // or '&.MuiInputLabel-shrink*'
transform: translate(14px, -6px) scale(0.75);
}
},
}
},
})
否则,您可以构建自己的全局 styles。
// GlobalStyles.js
import { createStyles, makeStyles } from '@material-ui/core';
const useStyles = makeStyles(() => createStyles({
'@global': {
'*': {
boxSizing: 'border-box',
margin: 0,
padding: 0,
},
body: {
height: '100%',
width: '100%'
},
'#root': {
height: '100%',
width: '100%'
}
...
'.some-class': {
'.MuiInputLabel-shrink*': { // or '&.MuiInputLabel-shrink*'
transform: translate(14px, -6px) scale(0.75);
}
}
}
}));
const GlobalStyles = () => {
useStyles();
return null;
};
export default GlobalStyles;
// App.js
...
import GlobalStyles from './GlobalStyles.js';
const App = () => {
return (
...
<Router>
<GlobalStyles />
...
</Router>
...
)
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.