如何更改 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">