How to style child components through parents and components already created by @material-ui

Asked

Viewed 59 times

0

I’m creating a sidebar and I’m using the Drawer from @material-ui and followed the first source-code of this 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>
  );
}

What I’d like to do is "push" only the 5px icons to the left, placing a margin-left: 5 in the component <MailIcon /> would work, however I would not like to do it "fixed", I would like to follow the same format of the standard css (if possible), something like this:

.List .ListItem .Icon{
     margin-left: 5px
}

So I can put the margin-left: 5px to push all the icons inside the List and within the ListItem, independent if there is 1 icon or 5 or 100 and independent of the name of the icon, is <MailIcon />, be it <InboxIcon/> or the icon that is.

javascript react

1 answer

0

On the site of the material UI, they give several examples how you can style your components.

One way to change the overall "CSS" of the components is like this:

const GlobalCss = withStyles({
    "@global": {
        ".MuiList-root .MuiListItem-root .MuiListItemIcon-root": {
           marginLeft: "5px"
        }
    }
})(() => null);

Then inside the code calls this component

<GlobalCss/>

That’s just one way to achieve that result.

Browser other questions tagged javascript react

You are not signed in. Login or sign up in order to post.