如何在 reactstrap 输入上应用自定义样式？

Question

如果有人有使用 reactstrap 的经验并且可以帮助我解决问题：我有一个 reactstrap Input 组件，我想在 styles.scss 中应用“border: none”。在他们的文档中，我没有看到 Input 组件以及可以使用的道具。我不知道我是否可以应用 border: none 从它的道具。到目前为止，我已经在 styles.scss:

中尝试过

.form-control {
  border: none;
}

或

#name.form-control {
  border: none;
}

或者通过在 Input 组件上应用 className={styles.inputName} 属性并尝试应用上述 css 属性。 None 到目前为止，这些都有效。谢谢。

Answer 1

像 Reactstrap 或 React Bootstrap 这样的框架会附带一个您导入的 CSS 文件。这是一个巨大的文件，包含您需要的所有属性。您所要做的就是将 class 名称应用于您的 React 组件，如 className={"classname1 classname2 ..."}.

所以对于边框，这里是文档：https://mdbootstrap.com/docs/react/utilities/borders/ 例如，您可以从该文档中看到，您可以通过应用此 class 名称 border-top-0 来仅删除顶部边框。几乎每个可以想象的名字都有一个 class 名称，例如显示、边距、填充、宽度、高度等

如何在 reactstrap 输入上应用自定义样式？

How can I apply custom styles on a reactstrap input?

css

reactjs

reactstrap