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>
  )
}

makeStyle不适用于自定义组件

1 个答案: