MUIv4 created the following classes for me from my nested theming:
<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>
Now I'm interested into changing the following class:
.MuiInputLabel-outlined-120.MuiInputLabel-shrink-117 {
transform: translate(14px, -6px) scale(0.75);
}
therefore I have a theming file [duplicates just have the purpose to show what I tried]:
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",
},
}
},
},
})
But none of the rules work? What am I doing wrong? How can I see the generated classNames from createTheme?
EDIT - I was able to achieve the wanted effect with a CSS Wrapper:
const MUIWrapper = styled.div`
[class*="MuiInputLabel-outlined"][class*="MuiInputLabel-shrink"] {
transform: translate(0px, -15px) scale(0.75);
}
}
`
But actually I didn't wanted to implemented it this way
Not sure why you built your theme like that (has duplicated MuiInputLabel
).
Please make sure the theme structure has no duplicated overriding components.
createTheme({
overrides: {
...
MuiFormLabel: {
outlined: {
...
},
shrink: {
...
}
}
},
})
If you want to style the same component inside a specific component, you could use &
and other css tricks in the nested theme structure.
createTheme({
overrides: {
...
MuiFormLabel: {
outlined: {
'.MuiInputLabel-shrink*': { // or '&.MuiInputLabel-shrink*'
transform: translate(14px, -6px) scale(0.75);
}
},
}
},
})
Otherwise, you could build your own global 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>
...
)
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.