css - 材质 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，将不胜感激

标签： cssreactjsmaterial-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>
  );
}