如何在 reactstrap 輸入上應用自定義 styles？

Question

如果有人有使用 reactstrap 的經驗並且可以幫助我解決問題：我有一個 reactstrap 輸入組件，我想在 styles.scss 中應用“border: none”。 在他們的文檔中，我沒有看到 Input 組件以及可以使用的道具。 我不知道我是否可以從它的道具中應用邊框：無。 到目前為止，我已經在 styles.scss 中嘗試過：

.form-control {
  border: none;
}

或者

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

或者通過在 Input 組件上應用className={styles.inputName}屬性並嘗試應用上面提到的 css 屬性。 到目前為止，這些都沒有奏效。 謝謝你。

Answer 1

Reactstrap 或 React Bootstrap 之類的框架帶有您導入的 CSS 文件。 這是一個巨大的文件，包含您需要的所有屬性。 您所做的就是將 class 名稱應用於您的 React 組件，如className={"classname1 classname2..."} 。

因此，對於邊框，這里是文檔： https://mdbootstrap.com/docs/react/utilities/borders/從該文檔中您可以看到，例如，您可以通過應用此border-top-0名稱邊框來僅刪除頂部邊框- border-top-0 。 並且有一個 class 名稱用於幾乎所有可以想象到的正確名稱，例如顯示、邊距、填充、寬度、高度等。