Я создал вертикальную вкладку, где при нажатии текст меняет цвет. Я пытаюсь изменить цвет значка также отдельным цветом. Кто-нибудь может помочь, пожалуйста
Я попытался назвать его в таблице стилей вкладок и по отдельности, но безрезультатно. Приведенный ниже код покажет мою попытку, когда я пытался создать класс, но появляется ошибка Cannot read свойства 'icon' undefined. Если решение раскрасить иконку и отдельно можно сделать с помощью классов, то, я думаю, нам просто нужно устранить эту ошибку. Если нет, пожалуйста, игнорируйте ошибку, и если есть какие-либо другие решения, пожалуйста, предложите. спасибо
импортированные файлы:
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