0

Estou aprendendo tanto react quanto a utilizar o material-ui em conjunto com react, meu problema é que eu gostaria de utilizar um "custom width" para o componente Drawer, na minha tentativa inicial eu fiz o seguinte:

<Drawer variant="permanent" style={{width:'240px'}}>
  <div>
    <IconButton>
      <HomeIcon />
      <Typography color="inherit" noWrap>
        Início
      </Typography>
    </IconButton>
   </div>
  <Divider />
</Drawer>

Contudo, o resultado obtido é o seguinte:

drawer imagem

Percebi com isso que o Drawer é composto por duas "div", quando eu utilizo a tag style, apenas a primeira div recebe o estilo desejado, e modificando manualmente o CSS no console do navegador da segunda div, eu obtenho o resultado desejado:

drawer resultado esperado

Vou ressaltar novamente que sou novo tanto em react quanto na utilização do pacote material-ui. Então o que eu devo fazer para alcançar essa "segunda div", gostaria muito de entender o que eu estou fazendo de errado.

3
  • 1
    Boa noite, o problema que você esta definido o width no Drawer , o correto é você definir o tamanho no conteúdo dele, defina o width na <div style={{width:'240px'}}> de dentro e remova do Drawer, no site do material-ui a varias exemplos de utilização e é possivel ver bem com é definido as medidas.
    – Chance
    Commented 24/01/2019 às 23:40
  • 1
    obrigado pela resposta, eu havia feito dessa forma, mas pensei que devido as minhas limitações ao conhecimento em ambas as ferramentas react e material-ui essa forma não estaria correta de se trabalhar, alias obrigado pelo exemplo. Ele me ajudou com algumas duvidas também Commented 25/01/2019 às 11:53
  • A sim tranquilo também de uma olhada em overrides no material ui, demonstra como sobrescrever o css padrão dos elementos é bem interessante.
    – Chance
    Commented 25/01/2019 às 14:28

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .