Как изменить значок вкладки SVG-изображения со стороннего (не материального интерфейса) на выделение - PullRequest
Новая
       17

Как изменить значок вкладки SVG-изображения со стороннего (не материального интерфейса) на выделение

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

Я пытался изменить цвет изображения SVG, которое я скачал с FlatIcon при выборе в списке вкладок и отдельно от текста.

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

Ниже приведен код без назначения класса. Спасибо за помощь

Импорт: 

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';

Содержание класса: 

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 = {
  iconOnlyStyle: {
    color: 'blue'
  },
}




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
};

export default withStyles(styles)(ProfileTabs)
...