第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

在 React 中使用 Material-UI 單擊時(shí)如何更改側(cè)邊欄菜單項(xiàng)的顏色?

在 React 中使用 Material-UI 單擊時(shí)如何更改側(cè)邊欄菜單項(xiàng)的顏色?

DIEA 2023-10-04 16:57:50
我是該框架的新手,我的目標(biāo)是當(dāng)我單擊側(cè)欄中的菜單項(xiàng)之一時(shí)顯示顏色。如果我們單擊表格組件,則表格名稱和圖標(biāo)應(yīng)變?yōu)榘咨?。誰(shuí)能幫助我如何在單擊菜單項(xiàng)時(shí)更改顏色?這是代碼: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貢獻(xiàn)1725條經(jīng)驗(yàn) 獲得超8個(gè)贊

實(shí)現(xiàn):?jiǎn)螕暨x項(xiàng)卡時(shí):

  • 將背景更改為灰色

  • 將圖標(biāo)更改為白色


根據(jù)設(shè)置條件樣式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>


查看完整回答
反對(duì) 回復(fù) 2023-10-04
  • 1 回答
  • 0 關(guān)注
  • 170 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)