He estado tratando de lograr lo simple. Estaba tratando de mostrar/ocultar mi <TreeMenu/> en el material UI v1 con pseudoselectores pero de alguna manera no funciona. Aquí está el código: 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',", }, },La clase root css funciona bien en la lista, pero rootListItem o incluso el selector @global li no funcionan. No estoy seguro de lo que estoy haciendo mal con los selectores. Leí los documentos de material-ui y dice que V1 admite los pseudoselectores.
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> Mire el componente <TreeMenu > . He aplicado 3 trucos diferentes: 1) clase hoverEle con el selector '&:hover' . 2) Intenté anular la clase raíz predeterminada de <ListItemSecondaryAction> con mi clase rootListItem 3) Usando otros pseudoselectores en li. Vea 'li > div.nth-of-type(1)':
Después de un tiempo luchando para tener su código en funcionamiento, encontré lo que está mal con su código.
Todo parece estar bien, el selector para rootListItem funciona de inmediato, el problema es que no puede usar el pseudo-selector :hover sobre un elemento que tiene display: none . En su lugar, debe usar opacity: 0 and opacity: 1 , ocultará su ListItemSecondaryAction pero al mismo tiempo le permitirá desplazarse. Por lo tanto, elementos con visualización: ninguno, técnicamente no se muestra y, por lo tanto, no puede pasar el cursor sobre ellos.
Acerca de su pseudo selector en global, simplemente lo escribió incorrectamente. Usando dos puntos en lugar de punto después de div y cambiando backgroundColor a 'amarillo' en lugar de "'amarillo'",
'li > div:nth-of-type(1)': { display: 'block !important', backgroundColor: 'yellow', },No sabía cómo se ve tu TreeMenu como componente, así que simplemente creé una lista con nodos ul / li / div.
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", }, }, };Y:
<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>* Estoy usando treeNode que es una matriz para mí y eliminé el resto de las funciones y TreeMenu.
La solución que funcionó para mí es la siguiente
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)" } }),Solo agregando con Jorge Santos Neil, no necesariamente necesitas usar accesorios. Estoy agregando uno de los ejemplos que se prueban para un escenario diferente. Una nota es que esto debe incluirse en "makeStyles" y luego usarse como "className". Simplemente ponerlo dentro de "styles={{}}" no funciona.
Ejemplo:
const useStyles = makeStyles((theme) => ({ paragraphWithWarningDiv: { margin: "32px 0px 24px", "& :nth-child(1)": { marginBottom: "100px" } } }));