0
182
ViewsHow to access material ui Expanded property in Expansion Panel
As shown in the picture below:
I needed to make the expansion panel (only the expansion part, when the expansion was active) occupy 100% of the Div it is currently occupying. That height: 100% does the job, but inside my styling, I can't access that property correctly.
My expansion panel code snippet:
<ExpansionPanel classes={{ root: classes.expanded }}
My styling:
expanded: {
'&$expanded': {
height: '100%'
},
margin: '0 !important',
boxShadow: 'none',
borderRadius: 0,
'&::before': {
content: 'none'
}
}
But when rendering my styling it results in the following picture:
It does not apply the styling to the .MuiExpansionPanel-root.Mui-expanded, instead, it is increasing the size of the box when it is not expanded.
Thanks in advance.
1 answers
Answer question0
see the MatUI api docs under the css section and the rule names. those are the keys you need to provide to the classes prop. You are setting your expanded class name to the root, you need to set it to expanded
EDIT based on code sandbox
this
expandedPanel: {
"&$expanded": {
height: "100%"
}
}
is equivalent to the css
.expandedPanel.expanded{}
However, MatUI is conditionally applying the expandedPanel class already and there is not yet another .expanded class which is why it fails. you dont need to do the &$expanded check yourself. Just need to change it to
expandedPanel: {
height: "100%"
}