时间戳

首页 > 解决方案 > 更改 reactbootstrap 导航栏切换图标。（样式化组件）

reactjs - 更改 reactbootstrap 导航栏切换图标。（样式化组件）

问题描述

有没有办法使用样式组件将Navbar.Toggle (React-bootstrap) 按钮图标更改为自定义图标？

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

标签： reactjsbootstrap-4react-bootstrapstyled-components

解决方案

是的，您可以使用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")
  }`

推荐阅读