编辑材料UI弹出窗口的CSS

Question

我有一个重要的用户界面弹出窗口，我正在尝试向其中添加样式。

这是我的弹出窗口

<Popper
          id={id}
          open={anchorEl && anchorEl.id === id || false}
          anchorEl={anchorEl}
        >
          <div className={classes.paper}>
            {
              popoverCategory.map(url => (
                <img
                  key={id}
                  data-sizes="auto"
                  className="lazyload"
                  src={url}
                  alt="Puntospoint"
                />
              ))
            }
          </div>
        </Popper>

这是我的CSS

const useStyles = makeStyles(theme => ({
  root: {
    display: 'block',
    margin: '0 auto',
    maxWidth: '50%',
    [theme.breakpoints.down('md')]: {
      maxWidth: '70%',
    },
    [theme.breakpoints.down('sm')]: {
      maxWidth: '100%',
    },
    '& .experiences-column': {
      display: 'inline-block',
      verticalAlign: 'top',
      textAlign: 'center',
      '&.col1': {
        width: '36.31%',
        [theme.breakpoints.down('sm')]: {
          width: 'initial',
        },
      },
        '& .paper': {
          position: 'absolute',
          background: '#000',
        },
      },
    },
  },
}), { name: 'ExperiencesStyle' });

我尝试过给纸上课增添样式，但没有结果我想使每个弹出框的背景颜色不同，并使弹出框的宽度与父div的宽度相同。然后将弹出窗口移到它对应的体验上。

Answer 1

根据作者评论更新的答案

---

您可以为每个Popper指定一个特殊的类名，并使用makeStyles动态创建此类。假设您的ID为“ 1”，“ 2”，“ 3”（假设您事先有ID。如果没有，则需要修改我的答案以适合您的需求）假设您要为您的班级命名为paper-1，paper-2，paper-3：

const useCustomStylesByIds = ({ids}) => {
  const myStyles = makeStyles(theme => {
    let stylesObj = {};

    ids.forEach(id => {
      stylesObj[getPaperKey(id)] = {
        backgroundColor: idToColorMapper[id],
      }
    })

    return stylesObj;
  })

  return myStyles();
}

const getPaperKey = id => `paper-${id}`;

const idToColorMapper = {
  1: 'red',
  2: 'blue',
  3: 'yellow'
}

export default function SimplePoppers() {
  const ids = [1,2,3]
  return (
    ids.map(id => (
      <CustomPopper id={id} />
    ))
  );
}

const CustomPopper = props => {
  const ids = [1,2,3];
  const classes = useCustomStylesByIds({ids});
  const [anchorEl, setAnchorEl] = React.useState(null);
  const {id} = props;
  const handleClick = event => {
    setAnchorEl(anchorEl ? null : event.currentTarget);
  };

  const open = Boolean(anchorEl);

  return (
        <div key={id} >
      <button aria-describedby={id} type="button" onClick={handleClick}>
        Toggle Popper
      </button>
      <Popper id={id} open={open} anchorEl={anchorEl}>
        <div className={classes[getPaperKey(id)]}>The content of the Popper.</div>
      </Popper>
    </div>

  );
}

[在上面的示例中，我用自己的函数包装了makeStyles，该函数将id作为参数，为每个id创建一个对象。示例返回的对象是：

{
  'paper-1': {
    backgroundColor: 'red'
  },
  'paper-2': {
    backgroundColor: 'blue'
  },
  'paper-3': {
    backgroundColor: 'yellow'
  }
}