如何使用 Styled-Components 覆盖 CSS class

Question

覆盖 ant-tooltip-inner css class

使用正常 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

Tooltips、Modal 或类似组件在您的 SPA 外部呈现，以提高组件树的呈现性能。

相同的屏幕截图。

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

Answer 2

我已经尝试使用 styled-components 从 antd 覆盖 Modal 的 css，但仍然无法像 Kushalvm 上面所说的那样工作。我可以使用来自 Modal.

的带有 className 属性的纯 CSS 来覆盖

这里看antd Modal的属性 API --> https://ant.design/components/modal/

如何使用 Styled-Components 覆盖 CSS class

How to override CSS class with Styled-Components

reactjs

styled-components