Ways to restructure a CSS class into a Material-UI class

Question

Ways to restructure a CSS class into a Material-UI class

Hello everyone 🌟

I've been working on a project using material-UI, and I encountered an issue with the popover functionality. It seems that MUI popovers have a z-index of 1500 which blocks all events like mouseEnter/mouseLeave. I need my users to be able to navigate and interact with buttons and collapse elements within this div, so I decided to try implementing a pure CSS solution instead. After spending hours trying to tweak the behavior of the MUI popover, I ended up grabbing some old CSS from another project. Now, I'm struggling to convert it into a format that MUI accepts.

The CSS code I'm trying to integrate looks like 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);
}

My attempt to adapt this into MUI-compatible CSS is as follows:

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've consulted the MUI theming documentation, but I'm still stuck on this issue. Any help or guidance would be greatly appreciated! Have a fantastic day, everyone!

css material-ui theming

Answer 1

Answer №1

To solve the issue with the popover, I utilized a combination of CSS and hooks to achieve the desired behaviors on 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 plan to raise an issue on the MUI GitHub repository to address this frustrating behavior in the popover component.

Answer 2

To solve the issue with the popover, I utilized a combination of CSS and hooks to achieve the desired behaviors on 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 plan to raise an issue on the MUI GitHub repository to address this frustrating behavior in the popover component.

Ways to restructure a CSS class into a Material-UI class

Hello everyone 🌟

Answer №1

Similar questions

What could be causing the unresponsive hamburger button on my navbar?

What is the best way to place multiple images on top of one another within a single div, and make them break apart with animation upon hovering?

Transforming the appearance of the menu element in Vue using transitions

Creating a dynamic and flexible div using CSS

Using Three.js to display a CSS3D-rendered DIV in full-screen mode

Issue with customizing the appearance of the selected option in a dropdown menu

Organizing items in rows with alternating quantities using CSS within a fluid design

Does li behave like a separate element from p when it comes to pseudo-class assignments?

Is there a way to efficiently create an ng-repeat for multiple divs?

A striking half-page visual showcasing the sleek design and functionality of MUI v

Issues with the menu pop-up functionality arise when utilizing the CSS class .active

Issues with the functionality of the Customer ListItem on a Selectable List have been identified within the material-ui framework

What is causing the icons to be influenced by the "active" action value in the Material UI palette?

The border in my HTML table is not displaying when I run my flask application

Delete any classes that start with a specific prefix

Creating two columns using React and Material-UI Grid while utilizing just one map function for iteration

Creating a scrollable HTML5 div container with fixed divs positioned within it

What is the best way to optimize Bootstrap 5 grids for mobile responsiveness?

Troubleshooting: My React project's Material UI dropdown menu is malfunctioning

After removing certain rows from the table, the rows that follow will either become selected or remain selected