Question

我创建了一个垂直标签，单击该标签时文本会更改颜色。我正在尝试使用单独的颜色更改图标颜色。谁能帮忙

我尝试将其分别命名在标签样式表上，但没有结果。下面的代码将显示我尝试创建类的尝试，但是出现无法读取未定义的属性“ icon”的错误。如果可以使用类分别为图标和单独着色的解决方案，那么我想我们只需要解决此错误即可。如果不是，请忽略该错误，如果还有其他解决方案，请提出建议。谢谢

导入的文件：

import React from "react";
import PropTypes from "prop-types";
import ReactDOM from "react-dom";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";
import { withStyles } from "@material-ui/core/styles";
import Home from './Screens/Home'
import home from './home.svg';

课程内容：

export default class ProfileTabs extends React.PureComponent {
  state = { activeIndex: 0 };

  handleChange = (_, activeIndex) => this.setState({ activeIndex });
  render() {
    const  { classes } = this.props;
    const { activeIndex } = this.state;
    return (
        <nav className= "side-drawer">
      <div style={{letterSpacing: 0.7, left: 70, position: "absolute", marginTop: 40 ,}}>
        <VerticalTabs className={classes.icon} variant="fullWidth" value={activeIndex} onChange={this.handleChange}>
          <MyTab  icon ={<img className= "home" src={home}  alt="home" style={{height: 45, left:20, top:20, position: "absolute"}}/*Pay FlatIcon or replace by design *//>}
          label={<p style={{ textTransform:"capitalize", position:"absolute", left:120, top:27.5,}}>
          Home
          </p>} 
</VerticalTabs>



        {activeIndex === 0 && <TabContainer><Home/></TabContainer>}
</div>
      </nav>
    );
  }
}

样式和其他：

const VerticalTabs = withStyles(theme => ({
  flexContainer: {
    flexDirection: "column"
  },
  indicator: {
    display: "none"

  },
  root:{
    position:"absolute",
    left:-70,
    top:-40,

  }

}))(Tabs);

const MyTab = withStyles(theme => ({
  selected: {
    color: "White",
    borderRight: "none",

  },
  root: {
  minWidth: 221,
  margin:0,
 paddingBottom:99

  },


}))(Tab);



const styles = theme => ({
  icon: {
    color:"red"
  }
});


function TabContainer(props) {
  return (
    <Typography component="div" style={{ padding: 9 * 3 }}>
      {props.children}
    </Typography>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<ProfileTabs />, rootElement);

ProfileTabs.propTypes = {
  classes: PropTypes.object.isRequired
};

当前错误：

TypeError: Cannot read property 'icon' of undefined

  28 | return (
  29 |     <nav className= "side-drawer">
  30 |   <div style={{letterSpacing: 0.7, left: 70, position: "absolute", marginTop: 40 ,}}>
> 31 |     <VerticalTabs className={classes.icon} variant="fullWidth" value={activeIndex} onChange={this.handleChange}>
     | ^  32 |       <MyTab  icon ={<img className= "home" src={home}  alt="home" style={{height: 45, left:20, top:20, position: "absolute"}}/*Pay FlatIcon or replace by design *//>}
  33 |       label={<p style={{ textTransform:"capitalize", position:"absolute", left:120, top:27.5,}}>
  34 |       Home

Answer 1

我希望这会有所帮助。我已经重构了您的代码以分离所有样式，然后使用MUI类对象将特定的样式替代传递给它们的元素。样式和类可能仍需要进行一些调整-考虑到提供的代码，这是最好的选择：

import Icon from "@material-ui/core/Icon"; // <== only if you want to use the MUI 'home'

const styles = {
  iconOnlyStyle: {
    color: 'blue'
  },
  myDivStyles: {
    letterSpacing: 0.7,
    left: 70,
    position: "absolute",
    marginTop: 40
  },
  myIconStyles: {
    color:"red",  // <== this will change both label and icon
    height: 45,
    left:20,
    top:20, 
    position: "absolute"
  },
  myLabelStyles: {
    textTransform: "capitalize",
    position: "absolute",
    left: 120,
    top: 27.5
  },
  sideDrawer: {
    // ...styles
  },
  tabRoot: {
    minWidth: 221,
    margin:0,
    paddingBottom:99
  },
  tabSelected: {
    color: "White",
    borderRight: "none"
  },
  tabsRoot: {
    position:"absolute",
    left:-70,
    top:-40
  },
  tabsFlexContainer: {
    flexDirection: "column"
  },
  tabsIndicator: {
    display: "none"
  }
}

class ProfileTabs extends React.PureComponent {
  state = { activeIndex: 0 };

  handleChange = (_, activeIndex) => this.setState({ activeIndex });

  render() {
    const { classes } = this.props;

    return (
      <nav className={classes.sideDrawer}>
        <div className={classes.myDivStyles}>
          <Tabs 
            variant="fullWidth"
            value={activeIndex}
            onChange={this.handleChange}
            classes={{
              root: classes.tabsRoot,
              flexContainer: classes.tabsFlexContainer,
              indicator: classes.tabsIndicator
            }}
          >
            <Tab
              label="Home"
              icon={home}
              icon={<Icon classes={{ root: classes.iconOnlyStyle }}>home</Icon>}
              classes={{
                root: classes.tabRoot,
                labelIcon: classes.myIconStyles,
                label: classes.myLabelStyles,
                selected: classes.tabSelected
              }}
            />
          </Tabs>
        </div>
      </nav>
    )
  }

}

export default withStyles(styles)(ProfileTabs)

让我知道这是否没有道理或您需要任何解释。 MUI库中的class道具花了我一段时间来了解我第一次使用它的要点，但是希望这有助于弄清它如何工作。

尝试在选择Material UI时更改SVG图像图标的颜色

1 个答案: