小编Ido*_*Ido的帖子

尝试在网格表中打开 popper 时观察到错误。错误详情

Material-UI：anchorEl提供给组件的prop 无效。锚元素应该是文档布局的一部分。确保该元素存在于文档中或不显示 none。

下面是我在网格表中使用的示例代码：

<>
    <MoreVertIcon
    ref={anchorRef}
    aria-controls={open ? 'menu-list-grow' : undefined}
    aria-haspopup="true"
 // key={uuidv4()}
    onClick={handleToggle}
    style={{ color: theme.palette.primary.main }}
    />
    <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
        hello world
    </Popper>
</>

找到了一个参考，但不确定我在哪里打破了这个规范。任何帮助表示赞赏。

我尝试使用“react-beautiful-dnd”，然后将其实现到现有项目中。我使用的软件包版本是 10.1.1，因为我不能使用更高的版本。

我尝试将占位符放在不同的 div 中，并为可放置元素提供。

import React from 'react';
import SalesChart from './SalesChart';
import Tasks from './Tasks';
import LunchFeed from 'widgets/LunchFeed';
import Weather from 'widgets/Weather';
import {Draggable, Droppable, DragDropContext} from "react-beautiful-dnd";

class Dashboard extends React.Component {
    constructor(props) {
        super(props);
    }

    onDragEnd(result) {
        //TODO
        const {destination, source, draggableId} = result;
        console.log(result);

        if (!destination) {
            return;
        }

    }

    render() {
        return (
            <DragDropContext onDragEnd={this.onDragEnd}>
                <Droppable droppableId="drop1">
                    {(provided, snapshot) => (
                        <div className="content" ref={provided.innerRef}  {...provided.droppableProps}>
                            <div className="container-fluid">


                                <div className="row">

                                    <Draggable key={1} draggableId={1} index={1}> …

我发现了很多关于重写样式的帖子，但没有什么比我遇到的问题更相似的。我正在创建样式化的material-ui组件并将它们导入到我的应用程序的不同部分。我希望能够覆盖各个父组件中的一些样式。

我有一个按钮组件：

import React from "react";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  buttonBlue: {
    background: "#09a1e2",
    border: "1px solid #09a1e2",
    borderRadius: "5px",
    color: "#ffffff",
    cursor: "pointer",
    fontSize: "1.25rem",
    padding: ".75rem 1.25rem .75rem 1.25rem",
    "&:hover": {
      backgroundColor: "#ffffff",
      color: "#09a1e2"
    }
  },
  buttonWhite: {
    background: "#ffffff",
    border: "1px solid #666666",
    borderRadius: "5px",
    cursor: "pointer",
    fontSize: "1rem",
    padding: ".5rem",
    width: "6rem",
    "&:hover": {
      backgroundColor: "#666666",
      color: "#ffffff"
    }
  }
});

const MediumButton = props => {
  const color …