Estou criando uma sidebar e estou utilizando o Drawer
do @material-ui e segui o primeiro source-code
deste link (https://material-ui.com/pt/components/drawers/):
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import Button from '@material-ui/core/Button';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
const useStyles = makeStyles({
list: {
width: 250,
},
fullList: {
width: 'auto',
},
});
export default function TemporaryDrawer() {
const classes = useStyles();
const [state, setState] = React.useState({
left: false
});
const toggleDrawer = (side, open) => event => {
if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
return;
}
setState({ ...state, [side]: open });
};
const sideList = side => (
<div
className={classes.list}
role="presentation"
onClick={toggleDrawer(side, false)}
onKeyDown={toggleDrawer(side, false)}
>
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem>
<ListItemIcon> <InboxIcon /> </ListItemIcon>
<ListItemText primary={'Inbox'} />
</ListItem>
<ListItem>
<ListItemIcon> <MailIcon /> </ListItemIcon>
<ListItemText primary={'Mail'} />
</ListItem>
))}
</List>
</div>
);
return (
<div>
<Button onClick={toggleDrawer('left', true)}>Open Left</Button>
<Drawer open={state.left} onClose={toggleDrawer('left', false)}>
{sideList('left')}
</Drawer>
</div>
);
}
O que eu gostaria de fazer é "empurrar" apenas os icones 5px para a esquerda, colocando um margin-left: 5
no componente <MailIcon />
daria certo, porém eu não gostaria de fazer isso de forma "fixa", eu gostaria de seguir o mesmo formato do css padrão (Caso seja possivel), algo assim:
.List .ListItem .Icon{
margin-left: 5px
}
Para, assim, eu poder colocar o margin-left: 5px
para empurrar todos os icones que estiverem dentro da List
e dentro da ListItem
, independente se exitir 1 icone ou 5 ou 100 e indepenente do nome do icone, seja <MailIcon />
, seja <InboxIcon/>
ou o icone que for.