Ant-design - 如何定制CSS组件，正确的方法？

Question

这是我第一次使用这个非常好的工具，Ant-design。 就像一个优秀的前端开发人员一样，我需要遵循我的 Figma 板并修改组件。 我使用CSS！重要规则来覆盖ant-design原始样式，就像你在这个例子

中看到的那样

我想自定义 Sider 组件：

.ant-menu-item {
  width: 40px !important;
  height: 40px !important;
  margin-bottom: 18px !important;
  padding-inline: 8px !important;
  margin-left: 14px !important;
}

我知道这不是最好的方法。 我尝试了文档中找到的几种解决方案主题、token、less等，但没有找到自定义组件的方法。 我不明白它的工作方式。 我只是想知道这个简单修改的最佳实践，覆盖组件样式的最佳方法是什么。 谢谢，一个很好的例子对于很多尝试自定义组件的人来说可能很有用。

Answer 1

我发现的一个解决方案是使用 ID 选择器来获取组件引用。 看起来 ID 样式优先。

    #sider-menu {
      .ant-menu-item {
        width: 40px;
        height: 40px;
        margin-bottom: 18px;
        padding-inline: 8px;
        margin-left: 14px;
      }
    }

我希望这个简单的解决方案会有所帮助。