css - 用 LESS 覆盖 AntD 组件样式

Question

我怀疑这更像是一个 LESS 问题，可能不是 Ant Design 特有的，除了他们实现某些组件的方式阻止我覆盖或扩展样式。

具体来说，我想更改 PageHeader 组件标题区域的字体大小和粗细。不幸的是，组件的样式并没有为这两个设置使用 default.less 主题中定义的 LESS 变量。源代码可以在这里找到:https://github.com/ant-design/ant-design/blob/master/components/page-header/style/index.less

例如，更改颜色或主题中定义的任何其他变量都没有问题，但我是 LESS 的新手，不确定如何覆盖为这样的单个组件定义的样式。哦，我不想使用内联样式。我们在应用程序的很多地方都使用了这个组件，所以我想在一个地方定义覆盖，一次并让它们对应用程序来说是全局的(就像我可以对主题变量做的那样)。

那么，如何覆盖引用文件第 45 行和第 46 行定义的字体粗细和字体大小样式？

Answer 1

这里是我如何在我的元素中完成的示例:

使用 .css 文件

通过.css/.scss等覆盖CSS类:

// Main layout where all antd componets used.
import './MyLayout.css';

/* MyLayout.css */
.ant-tooltip-inner {
  background-color: white;
  color: black;
}

这里我反转了所有工具提示(默认为黑色)。

使用样式组件

和上面一样，就像CSS-JS一样:

const LayoutStyled = styled(Layout)`
  height: 100vh;
  * {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  .ant-layout-sider-light .ant-layout-sider-trigger {
    border-right: 1px solid ${HCOLOR.border};
  }
`;

这里我覆盖了所有的字体，给antd sider trigger添加了右边框(默认无边框)。

---

结论

使用开发工具(在 Chrome 中为 Ctrl+Shift+C)找到 css-class/css-property 并根据需要覆盖它。