Question

是否可以使用样式化的组件将 Navbar.Toggle （反应启动）按钮图标更改为自定义图标？

我需要根据导航栏是否打开/显示不同的图标。

Answer 1

是的，您可以使用background-image属性对其进行更改。

默认

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E)
}

您的徽标

.navbar-toggler-icon {
    background-image: url("yourpath_of_img")
}

具有样式组件

const Thing = styled.div`
  .navbar-toggler-icon {
      background-image: url("yourpath_of_img")
  }`

Answer 2

您还想更改边框以移除边框。

print("in loop: targetNum: %s"%(i))

更改reactbootstrap导航栏切换图标。（带样式的组件）

2 个答案: