Ant Design 中的预定义类答案

【问题标题】：Predefined Classes in Ant DesignAnt Design 中的预定义类
【发布时间】：2020-06-21 02:41:48
【问题描述】：

我在我的 React 项目中使用 Ant Design，但并不完全理解它是如何工作的。 Ant Design 是否有像 Bootstrap 这样的预定义类？例如，如果我想在 Bootstrap 中居中元素，我会这样做吗？

class="d-flex justify-content-center"

【问题讨论】：

【解决方案1】：

是的，Antd 有预定义的类，比如 bootstrap

如果你想居中元素使用 justify="center" 它只适用于行

但是你可以使用@emotion/styled 包自定义antd元素。

您需要检查按钮并从元素选项卡中获取按钮类

现在您需要为按钮创建自定义样式

第一步：你需要导入@emotion/styled

从“@emotion/styled”导入样式；

第 2 步：现在覆盖按钮的 CSS

const CustomButton = Styled(Button)`
.ant-btn-primary{
 background-color: #4BA461;
}
`

第 3 步现在在你想要的地方使用这个 CustomButton

 <CustomButton>Register</CustomButton>

安装过程

npm install --save @emotion/styled

or

纱线添加@emotion/styled

您可以通过https://emotion.sh/docs/install了解更多关于情感/风格的信息

【讨论】：

【解决方案2】：

是的，在Ant Design 中，CSS 属性应用于center='sm' 之类的属性，而在引导程序中，CSS 属性应用于justify-content-sm-center 之类的类中。

【讨论】：