Mui Popper style not applied

[tillkrischer]

Hi,

I'm trying to adapt the virtualized autocomplete example.

I converted this:

const StyledPopper = styled(Popper)({
  [`& .${autocompleteClasses.listbox}`]: {
    boxSizing: "border-box",
    "& ul": {
      padding: 0,
      margin: 0
    }
  }
});

to this:

const useStyles = makeStyles()({
  root: {
    [`& .${autocompleteClasses.listbox}`]: {
      boxSizing: "border-box",
      "& ul": {
        padding: 0,
        margin: 0
      }
    }
  }
});

const StyledPopper = (props: PopperProps) => {
  const { children, className } = props;
  const { classes, cx } = useStyles();

  return (
    <Popper className={cx(classes.root, className)} {...props}>
      {children}
    </Popper>
  );
};

However the styles are not being applied. (there is a horizontal scrollbar on the dropdown, which padding: 0 should prevent)

codesandbox

[garronej]

Hi @tillkrischer,

That's only natural, you're overwriting the className by speading props:

const StyledPopper = (props: PopperProps) => {
  const { children, className } = props;
  const { classes, cx } = useStyles();

  return (
-    <Popper className={cx(classes.root, className)} {...props}>
-      {children}
-    </Popper>
+   <Popper {...props} className={cx(classes.root, className)} />
  );
};

Besides, you can use TSS withStyles if you want, it's a more direct port:

import { withStyles } from "tss-react/mui";

const StyledPopper = withStyles(Popper, {
  root: {
    [`& .${autocompleteClasses.listbox}`]: {
      border: "1px solid red",
      boxSizing: "border-box",
      "& ul": {
        padding: 100,
        margin: 100
      }
    }
  }
});

Best

[tillkrischer]

thank you!