如何使用样式化组件覆盖CSS类

Question

我想使用Styled-Components覆盖ant-tooltip-inner CSS类。

使用正常的import './Tooltip.css'，一切正常。

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

我的目标是覆盖项目（ant-tooltip-inner）中所有工具提示的颜色。

在此沙箱中，（Sidebar和Tooltip的所有工具提示都需要设置样式，取消注释import "./tooltip.css";即可使用。

Answer 1

工具提示，模态组件或类似组件在SPA之外进行渲染，以提高组件树的渲染性能。

相同的屏幕截图。

在您的情况下，您尝试为组件的单个实例设置样式，而该实例无法通过本地样式进行工作。您可以参考antd文档，也可以全局覆盖它（css文件或文档所说的其他任何方式）。

Answer 2

我已经在尝试使用样式化组件从antd覆盖Modal的css，但是仍然无法正常工作，正如Kushalvm所说。我可以使用Modal中具有className属性的纯CSS覆盖。

在此处查看antd Modal的属性API-> https://ant.design/components/modal/