材质 UI 工具提示箭头的自定义样式？答案

【问题标题】：custom styling for material UI tooltip arrow?材质 UI 工具提示箭头的自定义样式？
【发布时间】：2020-06-30 21:16:11
【问题描述】：

我想为 Material UI 工具提示箭头添加自定义样式，但我无法设置边框颜色和背景颜色。

这是我的配置 - 反应：

const useStylesBootstrap = makeStyles(theme => ({
arrow: {
    // color: '#E6E8ED',
    border: '1px solid #E6E8ED',
},
tooltip: {
    backgroundColor: theme.palette.common.white,
    border: '1px solid #E6E8ED',
    color: '#4A4A4A'
},

}));

这就是我想要实现的目标：

我想在三角形边框中应用灰色，背景将是白色。

在箭头配置中，边框配置不起作用，它将在包含三角形的正方形中应用边框颜色。如果没有材质 UI，可以使用伪 :before 和 :after 解决问题，以实现所需的输出。我想知道是否有使用材质 UI 自定义配置的解决方案。对 Material UI 不太熟悉，不胜感激

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

你是对的，你需要像这样覆盖&:before 伪选择器。这里是代码沙箱项目link

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

const useStyles = makeStyles(theme => ({
  arrow: {
    "&:before": {
      border: "1px solid #E6E8ED"
    },
    color: theme.palette.common.white
  },
  tooltip: {
    backgroundColor: theme.palette.common.white,
    border: "1px solid #E6E8ED",
    color: "#4A4A4A"
  }
}));

export default function ArrowTooltips() {
  let classes = useStyles();

  return (
    <Tooltip
      title="Add"
      arrow
      classes={{ arrow: classes.arrow, tooltip: classes.tooltip }}
    >
      <Button>Arrow</Button>
    </Tooltip>
  );
}

【讨论】：

只是添加，确保使用最新的material ui/core，否则箭头不起作用。我使用的是版本4.9.13

【解决方案2】：

See tooltip css。使用arrow 和&::before 定位箭头并应用您的样式。（注意那里的双 ::）

makeStyles - 样式

arrow: {
    fontSize: 20,
    color: "#4A4A4A",
    "&::before": {
      backgroundColor: "blue",
      border: "2px solid red"
    }
  }

JSX

<Tooltip classes={{ arrow: classes.arrow }} title="Delete" arrow>
        <IconButton aria-label="delete">
          <DeleteIcon />
        </IconButton>
      </Tooltip>

Working demo

【讨论】：

只是添加，确保使用最新的material ui/core，否则箭头不起作用。我使用的是版本4.9.13

【解决方案3】：

材料 ui 5 makestyles 上的仅供参考已弃用。

因为工具提示在门户中，所以不能直接设置样式

const StyledTooltip = styled<typeof Tooltip>(({ className, ...props }) => (
  <Tooltip {...props} classes={{ popper: className }} />
))``;

然后在 reder 函数中你可以使用 sx，通过设置 popper 你可以通过 sx 访问子 props

 <StyledTooltip
        open
        arrow
        sx={{
          '& .MuiTooltip-arrow': {
            background: 'red',
          },
        }}
      />

【讨论】：