reactjs - 如何在 Semantic React UI 中扩展 Input 的宽度大小？

Question

我在做 Reactjs 项目，我使用 Semantic UI React 来美化 Input .然而，似乎Input始终以默认大小显示。如何调整其水平宽度？

我按照 Semantic UI React Home page 上的说明进行操作，我把这行代码放到Html:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>

在我导入的 js 文件中:

import { Input } from 'semantic-ui-react';

并呈现输入:

<Input value={this.state.firstName} onChange={this.handleInputFirstName}/>

Answer 1

添加 style={{ width:"300px" }}对我来说非常好。我正在使用与您相同的样式表。你可以看看下面的代码:

const App = () => (
  <div style={styles}>
    <h2>Start editing width and see magic happen {'\u2728'}</h2>
    <Input placeholder="Hello there" style={{width: "370px"}}/>
  </div>
);

工作示例可以在这里看到: