I am using MUI and I want to override the width of the menu with styled components.
I tried this:
const StyledMenu = styled(Menu)`
&& {
width: 100%;
}
`;
And nothing happened.
Then I found out that MUI has the PaperProps and when applying:
<StyledMenu
id="menu-appbar"
PaperProps={{
style: {
width: '100%',
},
}}
>
I got the desiered result but I would like to accomplish it via styled-components, is it possible?
Every style that you write in PaperProps attribute will make it's impact in .MuiPaper-root class. So your code can be like this:
const StyledMenu = styled(Menu)`
&& {
& .MuiPaper-root {
width: 100%;
}
}
`;
More insights can be found in the docs.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments