使用 TextArea 标签时如何更改 textarea 的宽度答案

【问题标题】：How to change the width of textarea when using TextArea tag使用 TextArea 标签时如何更改 textarea 的宽度
【发布时间】：2019-06-17 18:34:31
【问题描述】：

在antd 库中，在名为ant-input 的类中，名为350px !important 的字段将textarea 的width 固定为350px，我无法覆盖此字段。

我搜索了antdhttps://ant.design/components/input-cn/提供的文档，他们没有提供允许我更改宽度的api。

.ant-input {
  color: var(--text-primary-color) !important;
  font-family: var(--text-primary-font-family);
  box-shadow: none;
  width: 350px !important;
  height: 50px;
  box-shadow: none;
  border: 1px solid var(--input-box-border-color) !important;
  border-radius: 0px;
}

我希望覆盖默认值的width，但!important 不允许我这样做。

【问题讨论】：

你可以得到更具体的，例如使用父容器创建规则.container-class .ant-input { width: whatever !important; }
他们的example 似乎没有在textarea 上设置任何硬宽度
它seems to work for me。建立一个minimal, reproducible example 来演示问题可能会有所帮助。

标签： css reactjs antd

【解决方案1】：

请尝试只传递样式参数，例如：

<Input.TextArea style={{ width: 500 }} />

在这里查看：https://codesandbox.io/embed/cocky-hugle-e9eu1

【讨论】：

【解决方案2】：

对我来说，它不起作用，但它起作用了：

<Input.TextArea style={{ width: 500, max-width: 500 }} />

然而，事实证明它并不可靠。

【讨论】：