來自 css 的樣式 react-bootstrap 按鈕

Question

總的來說，我對 React 和 JavaScript 還是很陌生。

我正在使用https://react-bootstrap.github.io/components/buttons/ 中react-bootstrap 中的 Button，但我想在我的 React 應用程序中從我的 css 文件中設置它上面的 Button 樣式，但它似乎沒有申請。

我的 Home.js 文件看起來像

import React from "react";
import '../App.css'; // Reflects the directory structure

export default function Home() {

  return (
    <div>
      <h2>Home</h2>
      <Button variant="light" className="formButtons">
    </div>
  )
}

我的 App.css 文件看起來像

.formButtons {
  margin: 10;
  overflow-wrap: break-word;
  color: red;
}

我可以說它不適用，因為文本顏色不是紅色。

提前致謝！

Answer 1

首先，您需要從react-bootstrap導入 Button 元素。 你可以這樣寫：

import Button from 'react-bootstrap/Button'

之后，您可以刪除 className 屬性，因為 React Bootstrap 以您可以依賴的一致方式構建組件 classNames。 您可以將樣式基於變體屬性，因此請嘗試以下操作：

主頁.js

import React from "react";
import Button from 'react-bootstrap/Button'
import '../App.css'; // Reflects the directory structure

export default function Home() {

  return (
    <div>
      <h2>Home</h2>
      <Button variant="light">TEXT</Button>
    </div>
  )
}

應用程序.css

.btn-light {
   margin: 10;
   overflow-wrap: break-word;
   color: red;
}