用 LESS 覆盖 AntD 组件样式答案

【问题标题】：Override AntD component style with LESS用 LESS 覆盖 AntD 组件样式
【发布时间】：2019-09-28 18:18:56
【问题描述】：

我怀疑这更像是一个 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 样式？

【问题讨论】：

只覆盖 cas 类
在哪里？如何？我们尝试过的一切都没有效果。
您能否将所需的输入、输出设为codesandbox.io/s/new，我会告诉您。
说起来容易做起来难。我必须重新创建整个解决方案才能正确设置所有涉及的内容（根据ant.design/docs/react/customize-theme）。而且，正如我所提到的，我们被指示不要使用内联样式，因为这些更改需要在全局范围内完成。如果不能简单地描述解决方案，那么我怀疑我们的治理委员会不会这样做。
您不必重新创建所有项目...只显示一个组件...无论如何我添加了我的答案

标签： css less antd

【解决方案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 并根据需要覆盖它。

【讨论】：

看来我们的问题是覆盖的位置。一旦我们将它们与应用程序的主布局相关联，就会应用覆盖。我将此作为答案，等待我们的治理委员会进行审查，以确保他们可以覆盖 CSS 类而不是源 LESS 变量（就像最初的问题一样）。

【解决方案2】：

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

【讨论】：