What is meaning of symbol &tagname: for css styling in material UI. Ex: &div: { display: 'flex' '}

user_1388835 0
Viewed 825

I am using React Material UI. what does symbol &div: mean in this css styles in a component. the css style is below.

  contactWrapper: {
    marginTop: theme.spacing(1),
    '& div': {
      display: 'flex',
    },
  },

Below is code snippet where the class is used.

 <div className={classes.contactWrapper}>
            <span className={classes.contentLabel}> Contact:</span>
            <div><Person className={classes.contactIcon} fontSize="small" /> {primaryContact.name}</div>
            <div><Phone className={classes.contactIcon} fontSize="small" /> {primaryContact.phone}</div>
          </div>
 </div>
react-material reactjs
2 Answers

It's part Material-ui's Styled-Components API. It is a reference for the element's parent's classname.

The ampersand (&) can be used to refer back to the main component.

Ampersands (&) get replaced by our generated, unique classname for that styled component, making it easy to have complex logic.

See Material-UI's Nesting Selectors Demo.

const useStyles = makeStyles({
  root: {
    color: 'red',
    '& p': { // p that is child of root classname
      margin: 0,
      color: 'green',
      '& span': { // span that is child of parent p
        color: 'blue',
      },
    },
  },
});

export default function NestedStylesHook() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      This is red since it is inside the root.
      <p>
        This is green since it is inside the paragraph{' '}
        <span>and this is blue since it is inside the span</span>
      </p>
    </div>
  );
}
user_86908570

The &div apply the styles to the <div> tags inside your contactWrapper class. This is material UI's way of doing Selector nesting

user_116444740
Related