0
I am learning both Re-act and using the material-ui in conjunction with React, my problem is that I would like to use a "custom width" for the component Drawer, in my initial attempt I did the following:
<Drawer variant="permanent" style={{width:'240px'}}>
<div>
<IconButton>
<HomeIcon />
<Typography color="inherit" noWrap>
Início
</Typography>
</IconButton>
</div>
<Divider />
</Drawer>
However, the result obtained is as follows::
I realized with this that Drawer is composed of two "div", when I use the tag style, only the first div receives the desired style, and manually modifying the CSS in the browser console of the second div, I get the desired result:
I will point out again that I am new to both React and the material-ui package usage. So what I must do to achieve this "second div", I would very much like to understand what I am doing wrong.
Good evening, the problem you are set the width on
Drawer, correct is you set the size in its content, set the width in the<div style={{width:'240px'}}>from within and remove fromDrawer, on the website of the material-ui to several examples of use and it is possible to see well with defined measures.– Chance
thanks for the reply, I had done so, but I thought that due to my limitations to knowledge in both tools React and material-ui this way would not be correct to work, alias thank you for example. He helped me with some doubts too
– Leonardo da Silva
The quiet yes also of a look at overrides in the ui material, demonstrates how to override the standard css of the elements is very interesting.
– Chance