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

Question

大家好

我正在为一个项目使用 material-UI，我尝试使用弹出框来显示文档的元数据，但是 MUI 弹出框的问题是它们放一个 1500 的 z-index 并阻止所有事件，如 mouseEnter/mouseLeave 但我有按钮并折叠在这个 div 我的用户应该能够用于导航或显示另一个信息所以下班后试图调整 MUI 弹出窗口的行为我考虑过使用纯 css 组件来完成它。为此，我已经从另一个项目中获取旧的 css，并且我坚持将它传递给 MUI 接受选择器的方式。

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

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

变成 MUI css 如果我可以这样称呼它：

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)",
    },
  },

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

Answer 1

我用这个 css 修复了弹出窗口问题并挂钩这让我创建 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>
    </>
  )
}

我将在 MUI github 存储库上提出一个问题，要求他们修复弹出组件中的这种烦人的行为。

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

How refacto css class to material-ui class

css

theming

material-ui

大家好