css - react Material 套件 - 无法向标题添加 Logo

Question

我想在页面的顶部标题中添加我的 Logo ，但我真的做不到，这是代码

   import React from "react";
  import classNames from "classnames";
  import PropTypes from "prop-types";
 import withStyles from "@material-ui/core/styles/withStyles";
 import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import IconButton from "@material-ui/core/IconButton";
 import Button from "@material-ui/core/Button";
import Hidden from "@material-ui/core/Hidden";
import Drawer from "@material-ui/core/Drawer";
import Menu from "@material-ui/icons/Menu";
 import headerStyle from "../../assets/jss/material-kit-react/components/headerStyle.jsx";

 class Header extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
  mobileOpen: false
 };
 this.handleDrawerToggle = this.handleDrawerToggle.bind(this);
 this.headerColorChange = this.headerColorChange.bind(this);
}
  handleDrawerToggle() {
  this.setState({ mobileOpen: !this.state.mobileOpen });
}
 componentDidMount() {
 if (this.props.changeColorOnScroll) {
  window.addEventListener("scroll", this.headerColorChange);
}
 }
 headerColorChange() {
const { classes, color, changeColorOnScroll } = this.props;
const windowsScrollTop = window.pageYOffset;
if (windowsScrollTop > changeColorOnScroll.height) {
  document.body
    .getElementsByTagName("header")[0]
    .classList.remove(classes[color]);
  document.body
    .getElementsByTagName("header")[0]
    .classList.add(classes[changeColorOnScroll.color]);
 } else {
  document.body
    .getElementsByTagName("header")[0]
    .classList.add(classes[color]);
  document.body
    .getElementsByTagName("header")[0]
    .classList.remove(classes[changeColorOnScroll.color]);
 }
}
componentWillUnmount() {
if (this.props.changeColorOnScroll) {
  window.removeEventListener("scroll", this.headerColorChange);
 }
}
render() {
const {
  classes,
  color,
  rightLinks,
  leftLinks,
  brand,
  fixed,
  absolute
 } = this.props;
 const appBarClasses = classNames({
  [classes.appBar]: true,
  [classes[color]]: color,
  [classes.absolute]: absolute,
  [classes.fixed]: fixed
 });
 const brandComponent = <Button className={classes.title}>{brand}</Button>;
 return (
  <AppBar className={appBarClasses}>
    <Toolbar className={classes.container}>
      {leftLinks !== undefined ? brandComponent : null}
      <div className={classes.flex}>
        {leftLinks !== undefined ? (
          <Hidden smDown implementation="css">
            {leftLinks}
          </Hidden>
        ) : (
          brandComponent
        )}
      </div>
      <Hidden smDown implementation="css">
        {rightLinks}
      </Hidden>
      <Hidden mdUp>
        <IconButton
          color="inherit"
          aria-label="open drawer"
          onClick={this.handleDrawerToggle}
        >
          <Menu />
        </IconButton>
      </Hidden>
    </Toolbar>
    <Hidden mdUp implementation="css">
      <Drawer
        variant="temporary"
        anchor={"right"}
        open={this.state.mobileOpen}
        classes={{
          paper: classes.drawerPaper
        }}
        onClose={this.handleDrawerToggle}
      >
        <div className={classes.appResponsive}>
          {leftLinks}
          {rightLinks}
        </div>
      </Drawer>
    </Hidden>
  </AppBar>
 );
}
}

Header.defaultProp = {
color: "white"
};

 Header.propTypes = {
classes: PropTypes.object.isRequired,
color: PropTypes.oneOf([
"primary",
"info",
"success",
"warning",
"danger",
"transparent",
"white",
"rose",
"dark"
]),
rightLinks: PropTypes.node,
leftLinks: PropTypes.node,
brand: PropTypes.string,
 fixed: PropTypes.bool,
absolute: PropTypes.bool,

changeColorOnScroll: PropTypes.shape({
height: PropTypes.number.isRequired,
color: PropTypes.oneOf([
  "primary",
  "info",
  "success",
  "warning",
  "danger",
  "transparent",
  "white",
  "rose",
  "dark"
 ]).isRequired
})
 };

 export default withStyles(headerStyle)(Header);

当我调用标题时，它是这样的

     <Header
      color="transparent"
      routes={dashboardRoutes}
      brand="my page"
      rightLinks={<HeaderLinks />}
      fixed
      changeColorOnScroll={{
        height: 400,
        color: "white"
      }}
      {...rest}
    />

我在页眉部分尝试了一个组件，但它确实弄乱了我的页眉，因为它很大而且我无法正确调整它的大小，有什么想法可以将 Logo 连接到此页眉而不影响我的宽度/高度尺寸吗？

Answer 1

你 brandComponent在 if 中， Prop leftLinks未定义，因为您没有将其传递给 <Header />所以你的brandComponent不会被渲染。

尝试将 leftLink 属性传递给 Header 并查看您的 brandComponent 是否会被渲染

<Header
  color="transparent"
  routes={dashboardRoutes}
  brand="my page"
  rightLinks={<HeaderLinks />}
  leftLinks={LEFTLINKS_HERE}
  fixed
  changeColorOnScroll={{
    height: 400,
    color: "white"
  }}
  {...rest}
/>