如何在 Drawer - Material UI 中将 MenuItem 设置为活动状态？

Posted 2023-02-22

【中文标题】如何在 Drawer - Material UI 中将 MenuItem 设置为活动状态？

【英文标题】：How can I set a MenuItem as active in Drawer - Material UI?

【发布时间】：2017-09-22 14:26:42

【问题描述】：

我有这个代码：

            <Drawer 
                docked = false
                width = 330
                open = this.state.drawerOpen
                onRequestChange = (drawerOpen) => this.setState(drawerOpen)
            >

                    <MenuItem primaryText="Inicio" onTouchTap = this.drawerOpened containerElement = <Link to="/administrador/inicio"/>/>
                    <MenuItem primaryText="Nueva Incidencia" onTouchTap = this.drawerOpened containerElement = <Link to="/administrador/nueva_incidencia"/>/>
                    <MenuItem primaryText="Incidencias Recibidas" onTouchTap = this.drawerOpened containerElement = <Link to="/administrador/incidencias_recibidas"/>/>
                    <MenuItem primaryText="Informes" /*onTouchTap = () => this.currentPages('Informes')*/onTouchTap = this.drawerOpened containerElement = <Link to="/administrador/informes"/>/>
            </Drawer>

我希望当我单击一个 MenuItem 时，它设置为“活动”（如在 Bootstrap 中），背景为浅灰色和类似的样式。我怎么能这样做？问题也是由于 React-Router 导致的，它卸载了组件 Menu 并重新渲染它，因此状态不可用。

谢谢。

【问题讨论】：

没人还有答案吗？

【参考方案1】：

在最新版本的 Material UI（肯定在 v4 中）中，您可以使用 selected 属性，例如这是我的 <ListItemLink> 组件，我正在使用 ListItem 组件，但也适用于 MenuItem。请注意selected=to === location.pathname 处的那一行：

import PropTypes,  InferProps  from 'prop-types'
import React from 'react'
import  Link, useParams, useLocation  from 'react-router-dom'

function ListItemLink( disabled = false, icon, primary, to : InferProps<typeof ListItemLink.propTypes>) 
  const location = useLocation()

  const renderLink = React.useMemo(
    () => React.forwardRef<htmlAnchorElement>((itemProps, ref) => <Link to=to ref=ref ...itemProps />),
    [to],
  )

  return (
    <ListItem
      button
      selected=to === location.pathname
      disabled=disabled ?? false
      component=renderLink
    >
      icon ? <ListItemIcon>icon</ListItemIcon> : null
      <ListItemText primary=primary />
    </ListItem>
  )


ListItemLink.propTypes = 
  icon: PropTypes.element,
  primary: PropTypes.string.isRequired,
  to: PropTypes.string.isRequired,
  disabled: PropTypes.bool


ListItemLink.defaultProps = 
  disabled: false

如果在某些时候，您想自定义默认选择的样式，只需在创建主题时覆盖它：

import  createMuiTheme  from '@material-ui/core/styles'
import  colors  from '@material-ui/core'


const theme = createMuiTheme(
  overrides: 
    MuiListItem: 
      root: 
        "&$selected": 
          color: colors.blue[500],
          backgroundColor: colors.lightBlue[100]
        
      
    
  
)

export default theme

【参考方案2】：

这是我的解决方法：

定义函数：

isActive = (value) => (location.pathname === value ? 'active' : '')

<MenuItem primaryText="Inicio" onTouchTap = this.drawerOpened 
className=this.isActive('/administrador/inicio')
containerElement = <Link to="/administrador/inicio"/>/>

现在您只是缺少“活动”的 de css 样式。

【参考方案3】：

如何围绕 MenuItem 创建一个包装组件并接受样式属性，然后将其应用于 MenuItem？

这可能会有所帮助： Toggle background color of list on click react.js

【讨论】：

非常感谢。我已经看到了。但我的问题也是由于我使用 React Router 的 Routes Link，并且组件重新渲染失去了他的状态。

哦，不知道，因为没有提到。我建议您是否可以发布一个单独的问题来使用 React Router 重新渲染来处理状态。

由于卸载和重新渲染组件，状态不可用，它们被设置为默认值。但是，我只有一个状态：opened: true/false，没有了。谢谢。

【参考方案4】：

@jpnazar 的答案几乎是正确的。但是， containerElement 属性不再起作用。您现在可以使用上面的代码来指定链接了。

import  Link  from 'react-router-dom';
import MenuItem from '@material-ui/core/MenuItem';

...

<MenuItem component=Link to="/your-path">...</MenuItem>

查看问题。 https://github.com/mui-org/material-ui/issues/204