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

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