Reactjs makeStyle不适用于自定义组件

我正在尝试使用带有几个按钮和自定义下拉菜单组件的材质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;

import React，{useContext}来自“React”；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core”导入{AppBar，工具栏，排版}；
从“/DropDown”导入下拉列表；
从“@material ui/core”导入{Button}”；
从“./AlgoContext”导入{AlgoContext}；
const useStyles=makeStyles（（主题）=>({
项目：{
边缘光：主题。间距（5），
},
}));
常量MainHeader=（）=>{
const classes=useStyles（）；
const[algo，setAlgo]=useContext（AlgoContext）；
返回(
寻路可视化器
可视化{algo.type}
清墙
畅通的道路
);
};
导出默认主标题；

className

是React元素的默认属性。您不能通过

className

传递样式对象来设置自定义组件的样式。与此相反，您应该将其作为道具传递给

下拉列表

组件。试试这个：

const MainHeader=（）=>{
const classes=useStyles（）；
const[algo，setAlgo]=useContext（AlgoContext）；
返回(
);
};
导出默认主标题；
常量下拉列表=（道具）=>{
...
返回(
...
)
}

显示下拉组件的代码。这可能是因为您正在将prop className传递给DropDown，但您从未在DropDown中的容器上使用它。在这种情况下，它也可以完美地将className用作atribute，只需传递className={props.className}，我很确定他没有传递prop，您的答案是正确的。