React Material UI Tooltip / Popper 删除不需要的透明度/不透明度

Question

Tooltip我正在尝试在项目中的某处使用React Material UI 库的组件。相同的代码如下：

<WhiteOnDarkGreyTooltipWithControls
  disableTouchListener
  disableFocusListener
  title={
    <Text selectable={false} style={[styles.ratedIndicatorTextColor]}>
      {"Game Completion Rate"}
    </Text>
  }
  placement={"bottom"}
  disablePortal={true}
>
  <Text selectable={false}>GCR</Text>
</WhiteOnDarkGreyTooltipWithControls>;

哪里WhiteOnDarkGreyTooltipWithControls看起来像这样：

import withStyles from "@material-ui/core/styles/withStyles";
import Tooltip from "@material-ui/core/Tooltip";
import React from "react";

export const WhiteOnDarkGreyTooltip = withStyles({
  tooltip: {
    color: "E0E0E0",
    backgroundColor: "#404040",
    borderRadius: 2,
    maxWidth: 200,
    textAlign: "center",
    fontWeight: 900,
    padding: 8,
    marginTop: 5,
    opacity: 1
  },
  popper: {
    opacity: 1
  }
})(Tooltip);

export class WhiteOnDarkGreyTooltipWithControls extends React.Component {
  state = { open: this.props.open };

  render = () => (
    <WhiteOnDarkGreyTooltip
      TransitionComponent={({ children }) => children}
      {...this.props}
      enterDelay={0}
      open={this.state.open}
      PopperProps={{
        placement: "bottom",
        disablePortal: !!this.props.disablePortal,
        modifiers: [
          {
            preventOverflow: {
              enabled: false,
              boundariesElement: "scrollParent"
            }
          }
        ]
      }}
    />
  );

  open = () => this.setState({ open: true });
  close = () => this.setState({ open: false });
}

我希望我的工具提示具有不透明的黑色背景，顶部有白色文本。在项目的其他地方，上述配置工作正常，但特别是在上述用法中，添加了一些透明度：

如何禁用 Material UI 库中组件中默认设置的任何不透明度？

Answer 1

我知道这已经很旧了，但我遇到了同样的问题，希望得到答案。我也在用disablePortal。但对于未来的搜索者来说，答案就是简单地把 a 放在zIndex=100某个地方。我正在使用material-ui-popup-state，所以我添加sx={{zindex:100}}到我的<Popper />组件中