Q:

How to override CSS class with Styled-Components

I want to override ant-tooltip-inner css class using Styled-Components.
Using normal import './Tooltip.css' everything works as intended.
// import './Tooltip.css';            // Overrides
const StyledLayout = styled.div` 

  // Doesn't Work     
  &.ant-tooltip-inner {
    background-color: palevioletred !important;
    color: white !important;
  }

  // Works on other CSS class
  // default is light-blue - check Sidebar menu item in sandbox 
  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background-color: purple;
  }
`;

function CoolTooltip() {
  return (
    <StyledLayout>
      ...
    </StyledLayout>
  );
}

My goal is to override all tooltips coloring in my project (ant-tooltip-inner).
In this sandbox, all tooltips (of the Sidebar and Tooltip) need to be styled, uncommenting import "./tooltip.css"; will work.

A:

Tooltips, Modal or similar components are rendered outside your SPA to improve the render performance of component tree.
Screenshot for same. 
In your case you're trying to style a single instance of a component which will NOT work via local styling. You may refer to antd docs to do so or you may override it globally ( css file or any other way as docs say).

