文章/答案/技术大牛

发布

社区首页 >问答首页 >有没有办法改变Antd内部按钮的颜色？

问有没有办法改变Antd内部按钮的颜色？
EN

Stack Overflow用户

提问于 2019-06-23 02:50:39

回答 2查看 27.3K关注 0票数 8

我正在为我的应用程序使用antd。我需要将默认主按钮的颜色从蓝色更改为灰色。看起来antd并没有提供这样的选择。怎样才能轻松更改按钮的颜色？

css

button

antd

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-24 02:11:03

antd的正式解决方案是每个组件的应用编程接口中提到的style props：

<Button type="primary" style={{ background: "red", borderColor: "yellow" }}>
  Submit
</Button>;

此外，当您想要覆盖应用程序中每个组件的样式时，应该覆盖前面提到的CSS类或Customize Theme。

// Should be used for overriding all buttons.
// Import the css on entry point.
.ant-btn-primary {
    background-color: red;
}

此外，请注意，您可以设置按钮容器的样式并确定其颜色(不会影响整个应用程序的样式)：

.button-container {
  .ant-btn-primary {
    background-color: palevioletred;
  }
}

CSS-in-JS示例：

const ButtonContainer = styled.div`
  .ant-btn-primary {
    background-color: red;
  }
`;

const App = () => {
  return (
    <ButtonContainer>
      <Button type="primary">My Button</Button>
    </ButtonContainer>
  );
};

票数 16

Stack Overflow用户

发布于 2019-06-23 03:15:13

我不熟悉Ant Design，但您可以在他们的文档(Customize Theme)中看到，您可以像这样编辑原色：

@primary-color: #1890ff; // primary color for all components

如果你只想改变按钮的颜色，你可以创建一个新的变量：

@button-color: #757575; // a custom variable

然后添加一个规则(它将覆盖源)：

.ant-btn-primary {
    background-color: @button-color;
}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56718231

复制

相似问题

问有没有办法改变Antd内部按钮的颜色？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有办法改变Antd内部按钮的颜色？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有办法改变Antd内部按钮的颜色？
EN