作为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样式直接嵌入如下形式:
第二种方法是直接在index.css上设置样式(请注意,必须在src下获取index.css):
index.css:
然后使用className在表单中调用它,如下所示:
loginForm.jsx: