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

我已经创建了一个垂直选项卡，当单击该选项卡时，文本会改变颜色。我试图改变图标的颜色，以及一个单独的颜色。有人能帮忙吗

我试着在标签样式表上单独命名，但没有结果。下面的代码将显示我尝试创建类的情况，但出现了一个错误，即无法读取未定义的属性“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>
    );
  }
}

导出默认类ProfileTabs扩展React.PureComponent{
状态={activeIndex:0}；
handleChange=（\u0，activeIndex）=>this.setState（{activeIndex}）；
render（）{
const{classes}=this.props；
const{activeIndex}=this.state；
返回(
({
flexContainer：{
flexDirection：“列”
},
指标：{
显示：“无”
},
根目录：{
位置：“绝对”，
左：-70，
前-40，
}
}))（选项卡）；
const MyTab=with样式（主题=>({
选定：{
颜色：“白色”，
右：“无”，
},
根目录：{
最小宽度：221，
保证金：0，
垫底：99
},
}))（选项卡）；
常量样式=主题=>({
图标：{
颜色：“红色”
}
});
功能选项卡容器（道具）{
返回(
{props.children}
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；
ProfileTabs.propTypes={
类：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

TypeError:无法读取未定义的属性“icon”
28 |返回(
29 |     
30 |   
> 31 |     
|^32 |我希望这能有所帮助。我已重构了您的代码以分离所有样式，然后使用MUI classes对象将您的特定样式替代传递给它们的元素。样式和类可能仍需要一些调整-鉴于提供的代码，这是一个最佳选择：

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)

从“@material ui/core/Icon”导入图标“//我希望这会有所帮助。我已经重构了您的代码以分离所有样式，然后使用MUI classes对象将您的特定样式覆盖传递到它们的元素。样式和类可能仍需要一些调整-鉴于提供的代码，这是一个最佳选择：

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)

从“@material ui/core/Icon”导入图标；//谢谢你的回复，我已经尝试过了，也尝试过集成到myTab样式中，但是没有结果当它被移动时，你仍然会收到相同的错误消息吗？没有错误，颜色根本不适用于花时间在这方面，我真的很欣赏它，不过这是否适用于第三方SVG图像？因为这似乎只适用于材质UI中的图标，除非我弄错了。我只参考了MUi svg，因为我知道它是有效的。如果你使用自己的svg，我不明白为什么它不会。如果使用自己的svg，你仍然可以应用样式：谢谢你的回复，我已经尝试过了，也尝试过集成到myTab styl中是的，但没有结果当它被移动时，你仍然会收到相同的错误消息吗？没有错误，颜色根本不适用于花一些时间在这上面。我真的很欣赏它，尽管这对第三方SVG图像有效吗？因为这似乎只适用于材质UI中的图标，除非我错了。我只有参考请参考我所知的MUi svg。如果您使用自己的svg，我看不出为什么它不会。如果使用自己的svg，您仍然可以应用样式：