亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 React 中使用 Material-UI 單擊時如何更改側邊欄菜單項的顏色?

在 React 中使用 Material-UI 單擊時如何更改側邊欄菜單項的顏色?

DIEA 2023-10-04 16:57:50
我是該框架的新手,我的目標是當我單擊側欄中的菜單項之一時顯示顏色。如果我們單擊表格組件,則表格名稱和圖標應變為白色。誰能幫助我如何在單擊菜單項時更改顏色?這是代碼:class Sidebar extends React.Component {  constructor(props) {    super(props);    this.state = {      selectedIndex: 0    };  }  handleListItemClick = (event, index) => {    this.setState({      selectedIndex: index    });  };  render() {    const { className, classes, onSidebarOpen, ...rest } = this.props;    return (      <div className={classes.root}>        <Drawer          className={classes.drawer}          variant="permanent"          classes={{            paper: classes.drawerPaper          }}        >          <div className={classes.toolbar} />          <List>            {["table", "organisation"].map((item, index) => {              const Icon = itemsConfig[item].icon;              return (                <ListItem                  component={Link}                  to={itemsConfig[item].link}                  selected={index === this.state.selectedIndex}                  onClick={event => this.handleListItemClick(event, index)}                  button                  key={item}                >                  <ListItemIcon>                    <Icon />                  </ListItemIcon>                  <ListItemText primary={itemsConfig[item].text} />                </ListItem>              );            })}          </List>        </Drawer>      </div>    );  }}export default withStyles(styles)(Sidebar);
查看完整描述

1 回答

?
qq_遁去的一_1

TA貢獻1725條經驗 獲得超8個贊

實現:單擊選項卡時:

  • 將背景更改為灰色

  • 將圖標更改為白色


根據設置條件樣式the state of the selected index就可以了。


<ListItem

? ...

? style={

? ? selectedIndex === index ? { backgroundColor: "grey" } : {}

? }

>

? <ListItemIcon>

? ? <Icon

? ? ? style={selectedIndex === index ? { color: "white" } : {}}

? ? />

? </ListItemIcon>

? <ListItemText primary={itemsConfig[item].text} />

</ListItem>


查看完整回答
反對 回復 2023-10-04
  • 1 回答
  • 0 關注
  • 172 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號