无法使用 LESS 更改主按钮颜色（ant.design）答案

【问题标题】：Cannot change primary button color with LESS (ant.design)无法使用 LESS 更改主按钮颜色（ant.design）
【发布时间】：2020-04-03 15:42:44
【问题描述】：

我已经使用 ant 设计来获得主要按钮样式，但是尝试使用 LESS 更改它的背景颜色，但由于某种原因没有任何效果，有人可能会遇到同样的问题或知道解决方案，我知道我可以轻松做到通过样式= {{背景颜色}}的方式但是我不想在应该使用LESS时编写额外的代码。我正在为所有 tekst 设置原色，它工作得很好

@btn-primary-bg: #1B2F55;

  <Button type='primary' onClick={this.handleSubmitEmail}>{submit}</Button>

antd.customize.less

enter image description here

【问题讨论】：

你能在包含样式覆盖的地方包含你的 webpack 配置吗？
@ageoff 无法发布代码，所以我添加了图片，谢谢
那是你的 less 文件，但你必须在某处包含它。 ant.design/docs/react/customize-theme您使用哪个选项来包含您的覆盖更少的文件？

标签： css reactjs less

【解决方案1】：

我发现了问题，项目是从另一个项目中获取的，并且 app.css 有带有颜色集的 ant primary，因此我发现并了解了优先级

【讨论】：

这里也一样。我的 App.css 文件顶部有 @import '~antd/dist/antd.css'，这覆盖了我设置的自定义样式。

【解决方案2】：

你必须访问 antd 的按钮类来改变样式。

为你的按钮组件添加一个新的类名。

 <Button type='primary' classname={'my-button'} onClick={this.handleSubmitEmail}>{submit}</Button>

然后，在LESS文件中，这样做，

.ant-btn.my-button{
  background-color: 'red'
}

【讨论】：

是的，谢谢，我知道我可以这样做，但为什么我不能只使用@btn-primary-color 来更改颜色github.com/ant-design/ant-design/blob/master/components/style/…
嘿。您想使用更少的文件进行更改吗？如果是，那么您需要导入具有@btn-primary-color 这个常量的特定文件。所以你可以先@import 'file_name.less' 然后再.ant-btn.my-button{ background-color: @btn-primary-color } 告诉我这是不是你要问的？

【解决方案3】：

你可以使用<Button htmlType="button" type="primary" id="turf-button" disabled={bnstate} shape="round" size="small" onClick={onconnect}>
那么

#turf-button {
  background-color: lime;
}

【讨论】：