React Material UI 扩展面板禁用光标指针答案

【问题标题】：React Material UI Expansion Panel disable cursor pointerReact Material UI 扩展面板禁用光标指针
【发布时间】：2020-08-09 07:56:35
【问题描述】：

我想在 Material-ui 扩展面板中禁用光标悬停，以便悬停只出现在 ExpandIcon 上：

https://material-ui.com/api/expansion-panel/

我不想使用 ExpansionPanel 的 disabled 属性，但我找不到通过 ExpansionPanelSummary 中的 css 控制光标指针行为的方法。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

这会将鼠标从指针更改为默认值，您无法单击面板打开面板，而只能单击图标打开摘要面板。 Check out sandbox demo

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%",
    "& .MuiExpansionPanelSummary-root:hover": {
      cursor: "default"
    }
  },
  panel: {
    cursor: "default"
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),
    fontWeight: theme.typography.fontWeightRegular
  }
}));

export default function SimpleExpansionPanel() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);
  return (
    <div className={classes.root}>
      <ExpansionPanel expanded={open}>
        <ExpansionPanelSummary
          expandIcon={<ExpandMoreIcon onClick={() => setOpen(!open)} />}
          classes={{
            // if styles not ovverided it shows flickering
            root: classes.panel // class name, e.g. `classes-nesting-root-x`
          }}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography className={classes.heading}>Expansion Panel 1</Typography>
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </ExpansionPanelDetails>
      </ExpansionPanel>
    </div>
  );
}

如果你想使用 CSS。然后将这些行添加到您的 CSS 文件中，然后将其导入。但是您可能会看到一点闪烁，因为在默认设置光标到指针后，您将其更改为默认（箭头）。您可以在主题中或使用 make 样式和类属性覆盖它。

.MuiExpansionPanelSummary-root:hover {
  cursor: "default";
}

【讨论】：

MuiExpansionPanel 已更新为 MuiAccordion。还有一个展开图标，悬停时也会有一个光标指针。您可以设置以下内容来覆盖... '& .MuiAccordionSummary-root:hover, .MuiButtonBase-root:hover': { cursor: 'default', },

【解决方案2】：

MuiExpansionPanel 已更新为 MuiAccordion。 AccordionSummary 展开图标和 AccordionSummary 在悬停时都会有一个光标指针。您可以设置以下内容来覆盖两者...

'& .MuiAccordionSummary-root:hover, .MuiButtonBase-root:hover': {
  cursor: 'default',
},

【讨论】：