如何在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>
);

这里可以看到工作实例：