小编Pie*_*uys的帖子

我在反应中使用 material-ui。假设我有这些样式的组件

const useStyles = makeStyles(theme => ({
  outerDiv: {
    backgroundColor: theme.palette.grey[200],
    padding: theme.spacing(4),
    '&:hover': {
      cursor: 'pointer',
      backgroundColor: theme.palette.grey[100]
   }
  },
  addIcon: (props: { dragActive: boolean }) => ({
    height: 50,
    width: 50,
    color: theme.palette.grey[400],
    marginBottom: theme.spacing(2)
  })
}));

function App() {
  const classes = useStyles();
  return (
    <Grid container>
      <Grid item className={classes.outerDiv}>
        <AddIcon className={classes.addIcon} />
      </Grid>
    </Grid>
  );
}

我想使用上面的样式将鼠标悬停在 externalDiv 上时更改 addIcon 的样式。

这是我的例子：https : //codesandbox.io/s/trusting-mcnulty-b1gcd?fontsize=14&hidenavigation=1&theme=dark

根据MatAutocomplete 文档，有一个classList输入可以设置面板的样式。

@Input('class') classList: string | 细绳[]

获取在主机 mat-autocomplete 元素上设置的类，并将它们应用到覆盖容器内的面板，以便轻松设置样式。

当我这样做时，<mat-autocomplete #auto="matAutocomplete" classList="test-class">我希望我会看到添加到 mat-autocomplete-panel 的测试类？但这不起作用。

有人可以解释一下如何使用这个输入吗？

闪电战