如何更改 react-bootstrap 中導航欄切換按鈕中的線條顏色？

Question

我想更改切換按鈕的線條顏色。 我試圖改變 Navbar.Toggle 的內聯樣式，但它沒有用。 有人有想法嗎？

Answer 1

嘗試將變體更改為深色，以便漢堡包顯示為淺色，與導航欄的“深色”變體形成對比。

<Navbar bg="transparent" expand="lg" variant="dark">

Answer 2

我只是為此掙扎了大約一個小時。 嘗試更改 sass 中的筆划值以覆蓋引導默認值對我不起作用，我嘗試過的任何其他更深層次的特異性規則也不起作用。

什么工作：使用不同的背景圖像並將其設置為.important，例如，我使用引導程序“列表”圖標svg（從他們的站點下載到資產文件夾）：我將其設置為相同class的背景由 DOM 中的引導程序生成：

.navbar-light .navbar-toggler-icon {
    background-image: url("../assets/list.svg") !important;
}

然后，在實際的 SVG 文件中（單擊代碼編輯器中的文件進行編輯），將“填充”或“描邊”屬性更改為您喜歡的任何顏色。 十分簡單：

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-list" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>

Answer 3

嘗試將 class 添加到按鈕（或僅覆蓋漢堡按鈕的當前 class）並執行以下操作：

.navbar-hamburger {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(255,255,255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

並替換描邊顏色。 這是在普通的引導程序 4 上測試的，我希望它有效！

Answer 4

如果你想要背景很暗，但漢堡包很亮，試試這個

<Navbar bg="dark" expand="lg" variant="dark">