makeStyle 不适用于自定义组件

Question

我正在尝试使用带有几个按钮和自定义下拉菜单组件的材质 ui 制作一个简单的导航栏。当我尝试使用 makeStyle 钩子对其进行样式设置时，样式仅适用于材质 ui 的按钮和标题，但不适用于自定义下拉组件。

import React, { useContext } from "react";
import { makeStyles } from "@material-ui/core/styles";
import { AppBar, Toolbar, Typography } from "@material-ui/core";
import DropDown from "./DropDown";
import { Button } from "@material-ui/core";
import { AlgoContext } from "../AlgoContext";

const useStyles = makeStyles((theme) => ({
  item: {
    marginRight: theme.spacing(5),
  },
}));

const MainHeader = () => {
  const classes = useStyles();
  const [algo, setAlgo] = useContext(AlgoContext);
  return (
    <div>
      <AppBar elevation={0} position='static'>
        <Toolbar>
          <Typography variant='h6' className={classes.item}>
            Pathfinding Visualiser
          </Typography>
          <Button variant='contained' className={classes.item}>
            Visualise {algo.type}
          </Button>
          <DropDown className={classes.item}></DropDown>
          <Button variant='contained' className={classes.item}>
            Clear walls
          </Button>
          <Button variant='contained' className={classes.item}>
            Clear path
          </Button>
        </Toolbar>
      </AppBar>
    </div>
  );
};

export default MainHeader;

Answer 1

className 是 React 元素的默认属性。您不能通过className 传递样式对象来设置自定义组件的样式。取而代之的是，您应该将其作为道具传递给DropDown 组件。试试这个：

const MainHeader = () => {
  const classes = useStyles();
  const [algo, setAlgo] = useContext(AlgoContext);
  return (
     <DropDown itemStyle={classes.item}></DropDown>
  );
};

export default MainHeader;

const DropDown = (props) => {
  ...
  return (
    <div className={props.itemStyle}>
      ...
    </div>
  )
}