如何将 css 类重构为 material-ui 类

问题描述

大家好?

我正在为一个项目使用 material-UI，我尝试使用 popover 来显示文档的元数据，但 MUI popover 的问题在于它们将 z-index 设为 1500 并阻止所有事件，例如 { {1}} 但我在这个 div 上有按钮和折叠，我的用户应该能够用于导航或显示另一个信息，所以在几个小时后试图调整 MUI 弹出窗口的comportement 我已经考虑用一个纯粹的css 组件。 为此，我从另一个项目中获取了旧的 css，我坚持将其传递到 MUI 接受选择器的方式中。

我的问题是我不知道如何通过这个：

mouseEnter/mouseLeave

进入一个 MUI css，如果我可以这样称呼它：

.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.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);
}

我已经检查了 MUI 主题文档，但我的大脑仍然停留在这个 .. 提前感谢您的帮助，祝您度过愉快的一天！

解决方法

我用这个 css 修复了 popover 问题并钩住了这让我创建了想要对 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.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",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>
    </>
  )
}

我将在 MUI github repo 上打开一个问题，要求他们修复 popover 组件中这个烦人的行为。