How refacto css class to material-ui class - css

Question

Hi everyone 😌
I'm using material-UI for a project and i have try to use popover for display metadata of a document but the problem with MUI popover is that they put a z-index of 1500 and block all event like mouseEnter/mouseLeave but I have buttons and collapse on this div my user should be able to use for navigate or display an another infos so after hours to trying to tweak the comportement of the MUI popover I have think about to do it with a pure css component.
For this I have go grab old css from a another project and I'm stuck to pass it into the way MUI accept selector.
My problem is that I don't see how pass this:
.popover__wrapper {
position: relative;
}
.popover__content {
opacity: 0;
visibility: hidden;
position: absolute;
left: -100px;
transform: translate(0, 10px);
background-color: #bfbfbf;
padding: 1.5rem;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
width: auto;
text-align: center;
}
.popover__content:before {
position: absolute;
z-index: -1;
content: "";
right: calc(50% - 10px);
top: -8px;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #bfbfbf transparent;
transition-duration: 0.3s;
transition-property: transform;
}
.popover__wrapper:hover .popover__content {
z-index: 10;
opacity: 1;
visibility: visible;
transform: translate(0, -20px);
transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
}
into a MUI css if i can call this like that:
popover__content: {
opacity: 0,
visibility: "hidden",
position: "absolute",
left: "-150px",
transform: "translate(0, 10px)",
width: "100%",
"&:before": {
position: "absolute",
zIndex: "-1",
right: "calc(50% - 10px)",
transitionDuration: "0.3s",
transitionProperty: "transform",
},
"&:hover": {
zIndex: "10",
opacity: "1",
visibility: "visible",
transform: "translate(0, -20px)",
transition: " all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97)",
},
},
I have check the MUI theming doc but my brain still stuck on this ..
Thanks by advance for your help have a great day all !

Answer 1

I fix the popover problem with this css and hooks this let me create the behaviors wanted to the DOM :
import React, { useState } from "react"
import { useSelector } from "react-redux"
import {
Grid, List, ListItem, Paper, Typography,
Divider, makeStyles, ListItemIcon,
ListItemText, Box,
} from "#material-ui/core"
import DescriptionIcon from "#material-ui/icons/Description"
const useStyles = makeStyles((theme) => ({
container: {
padding: theme.spacing(1),
borderRadius: theme.spacing(1.5),
background: "#FFFFFF",
boxShadow: "2px 2px 4px rgba(0, 0, 0, 0.0449219)",
},
title: {
color: "#4873c5",
},
paragraph: {
color: "#818181",
},
popover: {
zIndex: 2,
position: "absolute",
top: theme.spacing(-1),
left: theme.spacing(-24),
},
arrowRight: {
width: 0,
height: 0,
borderTop: "10px solid transparent",
borderBottom: "10px solid transparent",
borderLeft: "10px solid black",
position: "absolute",
right: theme.spacing(-1),
top: theme.spacing(2),
},
}))
const stages = [{ name: "Drafting", docs: 15 }, { name: "To Execute", docs: 5 }, { name: "Signature", docs: 10 }]
const tags = [{ name: "HR", docs: 10 }, { name: "Sales", docs: 4 }, { name: "Fundraising", docs: 1 }]
export default function ActiveDocuments() {
const classes = useStyles()
const documents = useSelector(state => state.documents)
const [popoverDetails, setPopoverDetails] = useState(null)
const onMouseLeaveDetails = (e) => {
if (e.relatedTarget.id === "activeDocumentsContainer")
return
setPopoverDetails(null)
}
// in case moving precisely on the diagonal of arrow
const hoverProtection = () => {
if (popoverDetails)
setPopoverDetails(null)
}
return (
<>
<Paper style={{ padding: 16 }} onMouseEnter={hoverProtection} id="activeDocumentsContainer">
<Box display="flex">
<Typography style={{ fontWeight: "bold", flexGrow: 1 }}>Active Documents</Typography>
<Typography>{documents.length}</Typography>
</Box>
<List id="testlist">
{stages.map((stage, idx) => (
<ListItem disableGutters key={idx}>
<div onMouseOver={() => setPopoverDetails(stage.name)}
onMouseLeave={onMouseLeaveDetails}>
<Typography className={classes.title}>
{stage.name}
</Typography>
{popoverDetails === stage.name && (
<Paper className={classes.popover} onMouseLeave={() => setPopoverDetails(null)}>
<div className={classes.arrowRight} />
<List>
{tags.map((tag, idx) => (
<ListItem key={idx}>
<Typography className={classes.title}>{tag.name}</Typography>
</ListItem>
))}
</List>
<Box>
<Typography style={{ fontWeight: "bold" }}>Latest Documents</Typography>
<List>
{documents.map((document, idx) => (
<ListItem key={idx}>
<ListItemIcon style={{ color: "#4873c5" }}>
<DescriptionIcon />
</ListItemIcon>
<ListItemText className={classes.title}>{document.filename}</ListItemText>
</ListItem>
))}
</List>
</Box>
</Paper>
)}
</div>
</ListItem>
))}
</List>
</Paper>
<List>
<ListItem>
<Grid container>
<Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
<Typography className={classes.title}>Template</Typography>
</Grid>
<Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
<Typography className={classes.paragraph} variant="body2">5 new this week</Typography>
</Grid>
</Grid>
</ListItem>
<Divider varient="fullWidth" style={{ backgroundColor: "#dcdee1" }} />
<ListItem>
<Grid container>
<Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
<Typography className={classes.title}>Signed</Typography>
</Grid>
<Grid item xs={12} sm={12} md={12} lg={12} xl={12}>
<Typography className={classes.paragraph} variant="body2">8 new this week</Typography>
</Grid>
</Grid>
</ListItem>
</List>
</>
)
}
I gonna open an issue on MUI github repo for ask them to fix this annoying behavior in the popover component.