score:0

fyi on material ui 5 makestyles is deprecated.

because tooltip is in portal you cannot style it directly

const styledtooltip = styled<typeof tooltip>(({ classname, ...props }) => (
  <tooltip {...props} classes={{ popper: classname }} />
))``;

then in reder function you can use sx, by setting popper you can access child props via sx

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

score:7

see tooltip css. use arrow and &::before to target the arrow and apply your styles. (note the double :: there)

makestyles - style

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

enter image description here

score:11

you are right, you need to override &:before pseudoselector like this. here is the code sandbox project 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>
  );
}

enter image description here


Related Query

More Query from same tag