如何在 react-bootstrap 中更改 NavBar 切换按钮中的线条颜色？

Posted 2023-02-22

【中文标题】如何在 react-bootstrap 中更改 NavBar 切换按钮中的线条颜色？

【英文标题】：how to change the line color in the NavBar toggle button in react-bootstrap?

【发布时间】：2020-07-31 13:44:32

【问题描述】：

我想更改切换按钮的线条颜色。 我试图改变 Navbar.Toggle 的内联样式，但它没有用。 有人有想法吗？

【问题讨论】：

您有机会查看我的答案吗？请让我知道结果，如果有帮助，请将答案标记为已接受。

【参考方案1】：

尝试将变体更改为深色，以便汉堡显示为浅色，与导航栏的“深色”变体形成对比。

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

【参考方案2】：

我只是为此挣扎了大约一个小时。尝试更改我的 sass 中的笔画值以覆盖引导默认值对我不起作用，我尝试过的任何其他更深层次的特异性规则也不起作用。

效果：使用不同的背景图片并将其设置为 !important。例如，我使用了引导程序“列表”图标 svg（从他们的网站下载到资产文件夹），我将其设置为由引导程序在 DOM 中生成的同一类的背景：

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

然后，在实际的 SVG 文件中（在代码编辑器中单击文件进行编辑），将“填充”或“描边”属性更改为您喜欢的任何颜色。轻松愉快：

<svg xmlns="http://www.w3.org/2000/svg"   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>

【参考方案3】：

尝试为按钮添加一个类（或者只是覆盖汉堡按钮的当前类）并执行以下操作：

.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 上测试的，我希望它有效！

【讨论】：

感谢您的回答。我会尝试一下，让你知道 atm，我只是在 NavBar.Toggle 元素中添加一个图标，带有一个很棒的字体图标

【参考方案4】：

如果你想要背景很暗，但汉堡包很亮，试试这个

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