使用 antd 输入组件放大 npx create-react-app 中的输入搜索组件答案

【问题标题】：enlarge input search component in npx create-react-app using antd input component使用 antd 输入组件放大 npx create-react-app 中的输入搜索组件
【发布时间】：2020-10-18 03:50:13
【问题描述】：

我正在使用 antd 输入搜索组件。 This is the link which I followed 我在 Search 组件中使用了 size="large" ，但我想再增加它的大小，并增加它的宽度。有没有这样的命令

【问题讨论】：

标签： reactjs search input components antd

【解决方案1】：

从文档中给出的this code sandbox，您可以使用css并看到您可以执行以下操作：

.ant-input-affix-wrapper-lg,  
.ant-input-affix-wrapper-lg input {
  font-size: 70px;
}

.ant-input-affix-wrapper-lg 将扩展包装器和内部的图标，但不会扩展输入中的文本。为此，您还需要添加第二行 .ant-input-affix-wrapper-lg input 来定位输入。

请注意，图标不是输入的一部分，因此您需要增加 both 的字体大小。随便玩玩，随心所欲:)

由于您想增加特定输入的大小，我建议不要像那样将代码放在 css 中。您应该为您的组件或在您的输入周围添加一个包装器以专门针对这个，例如：

#search-component .ant-input-affix-wrapper-lg,  
#search-component .ant-input-affix-wrapper-lg input {
  font-size: 70px;
}

【讨论】：