[TreeView] Migrate TreeItem to emotion#25835
Conversation
|
@material-ui/lab: parsed: +0.25% , gzip: +0.16% |
mnajdova
left a comment
There was a problem hiding this comment.
This is a bit trickier. The only problem I see is with the styles for the iconContainer and the label, but it is solvable. Let me know if you need some more help.
|
@oliviertassinari one question about theme styleOverrides for pseudo class. Is this the correct way to do in theme? createMuiTheme({
components: {
MuiTreeItem: {
styleOverrides: {
root: {
'& .Mui-focused': {
...styles
},
'& .Mui-expanded': {
...styles
}
}
}
}
}
}) |
|
@siriwatknp Yes |
@siriwatknp just watch out for the spacings, I believe it should be: createMuiTheme({
components: {
MuiTreeItem: {
styleOverrides: {
root: {
- '& .Mui-focused': {
+ '&.Mui-focused': {
...styles
},
- '& .Mui-expanded': {
+ '&.Mui-expanded': {
...styles
}
}
}
}
}
}) |
| backgroundColor: `var(--tree-view-bg-color, ${theme.palette.action.selected})`, | ||
| color: 'var(--tree-view-color)', | ||
| }, | ||
| '& $label': { |
There was a problem hiding this comment.
Should we use the global class here? For example:
| '& $label': { | |
| '& .MuiTreeItem-label': { |
There was a problem hiding this comment.
Or even better:
| '& $label': { | |
| '& .${treeItemClasses.label}': { |
There was a problem hiding this comment.
@mnajdova similar to @oliviertassinari suggestion, but there are many places still using $ in this file so I think it might be better to update the whole demo in another PR. is that okay?
There was a problem hiding this comment.
ok, got it, sorry missed previous question I guess :)
Got your point, do I need to change? because right now the pseudo styles is at const StyledTreeItemContent = experimentalStyled(...)({
[`&.${treeItemClasses.disabled}`]: {
...
},
[`&.${treeItemClasses.focused}`]: {
...
},
[`&.${treeItemClasses.selected}`]: {
...
},
}) |
I would expect in that case maybe either : createMuiTheme({
components: {
MuiTreeItem: {
styleOverrides: {
content: { // target content
'&.Mui-focused': {
...styles
},
'&.Mui-expanded': {
...styles
}
}
}
}
}
})or this createMuiTheme({
components: {
MuiTreeItem: {
styleOverrides: {
root: {
'& .MuiTreeItem-content.Mui-focused': {
...styles
},
'& .MuiTreeItem-content.Mui-expanded': {
...styles
}
}
}
}
}
}) |
Yep, I am good with this. |
One chunk of #24405