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

The Tailwind preset is generating CSS code, but the webpage is not displaying the intended styles

Challenge with Express Helmet: CSS fails to load properly on iOS Safari browser

Button failing to align properly in the center position

Styling elements with CSS to achieve proper positioning

Incorporating CSS animations into Vue.js while an API call is being made

MUI's Checkbox with Radio Button feature functionality

Ways to remove the initial row of inline-block divs

What could be causing my website's screen resolution to not fit properly on mobile devices?

Can anyone explain why I am having trouble loading JavaScript files into a different HTML file?

5 MUI Autocomplete options narrowed down to display count

Creating customized JQuery UI tabs to perfectly accommodate the available horizontal space

URL for CSS Background-Image

Accessing a New Router with ReactJS

What could be the reason for my onChange event not functioning properly?

Craft a search bar inspired by Google's iconic design using CSS styling

Different ways to personalize Material UI select

How come certain invisible screen elements suddenly become visible when the document is printed?

How can I disable the background color in Chrome autocomplete? Is there a way to make the background

It is important for the CSS :active state to transition to an "inactive" state after a certain period of

Exploring the Possibilities of Personalizing Data Tables