Попытка изменить цвет значка изображения SVG при выборе пользовательского интерфейса материала. - PullRequest
1 голос
/ 21 мая 2019

Я создал вертикальную вкладку, где при нажатии текст меняет цвет. Я пытаюсь изменить цвет значка также отдельным цветом. Кто-нибудь может помочь, пожалуйста

Я попытался назвать его в таблице стилей вкладок и по отдельности, но безрезультатно. Приведенный ниже код покажет мою попытку, когда я пытался создать класс, но появляется ошибка 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

1 Ответ

0 голосов
/ 21 мая 2019

Надеюсь, это поможет. Я реорганизовал ваш код для разделения всех стилей, а затем использовал объекты классов 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 заняла у меня некоторое время, чтобы понять суть, когда я впервые ее использовал, но, надеюсь, это поможет понять, как она может работать.

...