React Material UI Tooltip / Popper remove unwanted transparency / opacity

I'm trying to use the Tooltip component of the React Material UI Library somewhere in my project. The code for the same is like this:

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

Where WhiteOnDarkGreyTooltipWithControls looks like this:

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

I want my tooltips to have an opaque, black background with white text on top. Elsewhere in the project the above configuration works fine, but particularly in the above usage, some transparency is being added:

How can I disable any opacity being set by default in the Component in the Material UI library?