Menu
I have been trying to achieve the simple thing. I was trying to show/hide my <TreeMenu/> component in the material UI v1 with pseudo selectors but somehow it does not work. Here is the code : CSS:
root: { backgroundColor: 'white', '&:hover': { backgroundColor: '#99f', }, }, hoverEle: { visibility: 'hidden', '&:hover': { visibility: 'inherit', }, }, rootListItem: { backgroundColor: 'white', display: 'none', '&:hover': { display: 'block', backgroundColor: '#99f', }, }, '@global': { 'li > div.nth-of-type(1)': { display: 'block !important', backgroundColor: "'yellow',", }, }, The root css class works fine on the list but rootListItem or even the @global li selector does not work. I am not sure what I am doing wrong with selectors.I read the material-ui docs and says that V1 supports the pseudo selectors.
JSX:
<div> {props.treeNode.map(node => ( <ListItem key={`${node.Type}|${node.NodeID}`} id={`${node.Type}|${node.NodeID}`} className={(classes.nested, classes.root)} button divider disableGutters={false} dense onClick={() => props.onNodeClick(node.Type, node.NodeID, node.NodeName)} title={props.adminUser ? node.NodeID : ''} onMouseOver={() => props.onMouseOver(node.Type, node.NodeID)} > <ListItemIcon>{props.listIcon}</ListItemIcon> <ListItemText primary={node.NodeName} /> <ListItemSecondaryAction classes={{ root: classes.rootListItem }}> <TreeMenu /> </ListItemSecondaryAction> <div className={classes.hoverEle}> <TreeMenu /> </div> </ListItem> ))} </div> Please look at the <TreeMenu > component. I have applied 3 different tricks: 1) hoverEle class with '&:hover' selector. 2) Tried to override the default root class of <ListItemSecondaryAction> with my class rootListItem 3) Using other pseudo selectors on li.See 'li > div.nth-of-type(1)':
287
Use clsx to add multiple classes We are going to use the clsx npm library to add multiple classes to the component. import clsx from 'clsx'; Latest version of React material UI already has the clsx included in their library so you don't have to separately install it.
In order to use makeStyles function in your application you will need to import it in the component in where you plan to access the css that results from your makeStyles function. This is assuming you have already installed Material Ui in your project. This is in order for react to recognize it as a styles file.
Overview. CSS pseudo-classes are used to add styles to selectors, but only when those selectors meet certain conditions. A pseudo class is expressed by adding a colon (:) after a selector in CSS, followed by a pseudo-class such as "hover", "focus", or "active", like this: a:hover { /* your style here */ }
Though deprecated, you can still use makeStyles() in MUI 5, but we expect it (to be removed in v6, but hence my confusion between past and present tense). If you're familiar with React and JSX, this should look straightforward.
After a while fighting to have your code up and running I found what is wrong with your code.
Everything seems to be fine, the selector for rootListItem works right out of the box, the problem is that you can not use the pseudo-selector :hover on an element that has display: none. Instead you should be using opacity: 0 and opacity: 1, it will hide your ListItemSecondaryAction but at the same time it will allow you to hover. So, elements with display: none, doesn't technically display and thereby, you cannot hover them.
About your pseudo selector in global, you just wrote it wrongly. Using colon instead of dot after div and changing backgroundColor to 'yellow' instead of "'yellow',"
'li > div:nth-of-type(1)': { display: 'block !important', backgroundColor: 'yellow', }, I didn't know how does your TreeMenu look like as a component, so I just created a list with ul / li / div nodes.
const styles = { root: { backgroundColor: 'white', '&:hover': { backgroundColor: '#99f', }, }, hoverEle: { visibility: 'hidden', '&:hover': { visibility: 'inherit', }, }, rootListItem: { backgroundColor: 'white', opacity: 0, '&:hover': { opacity: 1, backgroundColor: '#99f', }, }, '@global': { 'li > div:nth-of-type(1)': { display: 'block !important', backgroundColor: "yellow", }, }, }; And:
<div> {treeNode.map(node => ( <ListItem key={`${node.Type}|${node.NodeID}`} id={`${node.Type}|${node.NodeID}`} className={classes.root} button divider disableGutters={false} dense onClick={() => {}} title={''} onMouseOver={() => {}} > <ListItemText primary={node.NodeName} /> <ListItemSecondaryAction classes={{ root: classes.rootListItem }}> <ul><li><div>Elem 1</div></li><li><div>Elem 2</div></li></ul> </ListItemSecondaryAction> <div className={classes.hoverEle}> <ul><li><div>Elem 1</div></li><li><div>Elem 2</div></li></ul> </div> </ListItem> ))} </div> *I am using treeNode that is an array for me and I removed the rest of the functions and TreeMenu.
192
The solution that worked for me is the following
export const useStyles = makeStyles(theme=>({ header:{ position: "relative!important", background: "linear-gradient(150deg,#7795f8 15%,#6772e5 70%,#555abf 94%)", margin: -50, padding: -50, height: 500, }, span: props => ({ padding:50, background: "rgba(255, 255, 255, .1)", borderRadius: "50%", position: "absolute", "&:nth-child(1)": { left: "-4%", bottom: "auto", background: "rgba(255, 255, 255, .1)" }, "&:nth-child(2)":{ right: "4%", top: "10%", background: "rgba(255, 255, 255, .1)" }, "&:nth-child(3)":{ top: 280, right: "5.66666%", background: "rgba(255, 255, 255, .3)" }, "&:nth-child(4)":{ top: 320, right: "7%", background: "rgba(255, 255, 255, .15)" }, "&:nth-child(5)":{ top: "38%", left: "1%", right: "auto", background: "rgba(255, 255, 255, .05)" }, "&:nth-child(6)": { width: 200, height: 200, top: "44%", left: "10%", right: "auto", background: "rgba(255, 255, 255, .15)" }, "&:nth-child(7)": { bottom: "50%", right: "36%", background: "rgba(255, 255, 255, .04)" }, "&:nth-child(8)": { bottom: 70, right: "2%", background: "rgba(255, 255, 255, .2)" }, "&:nth-child(9)": { bottom: "1%", right: "2%", background: "rgba(255, 255, 255, .1)" }, "&:nth-child(10)": { bottom: "1%", left: "1%", right: "auto", background: "rgba(255, 255, 255, .05)" } }), 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
