CSS 属性未出现在文本输入中答案

【问题标题】：CSS properties not appearing on text inputCSS 属性未出现在文本输入中
【发布时间】：2017-05-30 22:43:30
【问题描述】：

我试图让一些 css 属性出现在我的表单中，但是当我将属性移动到父 html 元素时它不起作用。直接应用于 .input 类的 CSS 属性有效，但是当应用于父类 .form-control 时，它们不起作用并且似乎不会影响输入，并且在 Chrome 开发工具中没有出现任何 .form-control 属性如果我检查文本输入元素？

.form-control {
  display: inline-block;
  height: 34px;
  width: 100%;
  margin: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
}


/*.form-control .input {*/
/*height: 34px;*/
/*width: 100%;*/
/*margin: 10px;*/
/*border-radius: 4px;*/
/*border: 1px solid #ccc;*/
/*}*/

.form-control .button {
  display: block;
  background-color: limegreen;
  font-size: 14px;
  font-weight: 400;
  color: white;
  margin: auto;
  vertical-align: middle;
  padding: 6px 12px;
  border: 1px solid transparent;
  height: 25px;
  border-radius: 4px;
}

<form className="form-control">
  <input className="input" type="text" />
  <button className="button">Get Weather</button>
</form>

【问题讨论】：

为什么是 className="" 而不是 class=""？
很可能是因为 OP 正在使用 React：facebook.github.io/react/docs/dom-elements.html
是的，抱歉，我应该补充一下我使用的是 React。
我已更新您的问题，以按预期包含 ReactJS 标记。
当您在开发工具中检查输出 html 时，您看到的属性是“类名”还是“类”？

标签： css reactjs

【解决方案1】：

从您提供的代码 sn-p 来看，这是因为您将规则直接应用于表单而不是表单输入。 Input 不会继承您在表单上设置的属性。您需要像在注释掉的代码中那样专门针对输入。

【讨论】：