作为React.js的初学者，每次尝试减小引导程序形式的宽度（下面的代码）都是失败的。我尝试使用Google搜索，并检查堆栈是否溢出，但没有得到我需要的确切答案。
<div>
<h1> Login </h1>
<form onSubmit={this.handleSubmit}>
{this.renderInput("username", "Username")}
{this.renderInput("password", "Password", "password")}
{this.renderButton("Login")}
</form>
</div>
经过艰苦的努力，我后来得到了解决方案，我想在下面为React新手放弃答案，只是为了让他们避免我经历的艰辛。
有两种方法可以实现此目的。 首先是将CSS样式直接嵌入如下形式：
<div>
<h1> Login </h1>
<form onSubmit={this.handleSubmit} style={{ width: "30rem" }}>
{this.renderInput("username", "Username")}
{this.renderInput("password", "Password", "password")}
{this.renderButton("Login")}
</form>
</div>
第二种方法是直接在index.css上设置样式（请注意，必须在src下获取index.css）：
index.css：
.formWidth {
width: 30rem;
}
然后使用className在表单中调用它，如下所示：
loginForm.jsx：
<div>
<h1> Login </h1>
<form onSubmit={this.handleSubmit} className="formWidth">
{this.renderInput("username", "Username")}
{this.renderInput("password", "Password", "password")}
{this.renderButton("Login")}
</form>
</div>