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

Question

我想为 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 不太熟悉，您的帮助将不胜感激

Answer 1

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

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

Answer 2

请参阅工具提示 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>

工作演示

Answer 3

使用官方MUI定制示例： https ://mui.com/material-ui/react-tooltip/#customization

const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
    <Tooltip {...props} classes={{ popper: className }} />
))(({ theme }) => ({
    [`& .${tooltipClasses.arrow}`]: {
        color: theme.palette.common.white,
        "&::before": {
            backgroundColor: theme.palette.common.white,
            border: "1px solid #999"
          }
      },
    [`& .${tooltipClasses.tooltip}`]: {
        backgroundColor: theme.palette.common.white,
        color: 'rgba(0, 0, 0, 0.87)',
        boxShadow: theme.shadows[1],
        fontSize: 11,
    },
}));