用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行上定义的font-weight和font-size样式？

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触发器上添加了右边框（默认为无边框）。

---

结论

使用开发工具（Chrome中的Ctrl+Shift+C）找到 css类/ css属性，并根据需要进行覆盖。

Answer 2

使用less文件来应用antd文档here中提到的样式。