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

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