I have this code:
<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>
I want that when I click on one MenuItem, it set up as 'active' (as in Bootstrap), with a background lighgrey and similar styles. How could I do this?. The problem is due to React-Router too, which unmount the component Menu and Re-Render it again, so states are not available.
Thank you.
Material UI Drawer is the most widely used component of Material UI. Material UI Drawer is used as a navigation bar of the website which displays a list of items and then clicking on the item the user will be redirected to the specific part of the web page/website.
In more recent version of Material UI (for sure in v4) you can use the selected
property, for example this is my <ListItemLink>
component, I'm using ListItem components but works also with MenuItem. Notice that line at 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
}
And if, at some point, you want to customize the default selected style, just override it when creating the theme:
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
Here is my workaround:
define function:
isActive = (value) => (location.pathname === value ? 'active' : '')
<MenuItem primaryText="Inicio" onTouchTap = {this.drawerOpened}
className={this.isActive('/administrador/inicio')}
containerElement = {<Link to="/administrador/inicio"/>}/>
now you are just missing de css styles for 'active'.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With