有没有办法在使用 css 或 js 的 react 中自定义“react-owl-carousel”的导航箭头和圆点？

问题描述

过去 2 天，我正在尝试使用 CSS 或 JS 更改“react-owl-carousel”（npm 包）的导航箭头和点，但不幸的是，我没有成功它。 我不想在那个项目中使用 jQuery。

---

我想改变这些形状/风格。?

解决方法

“选择库提供给您的任何箭头（id - 类名），您可以从 dom 检查器中看到它，然后使用您的自定义 CSS 将其覆盖。” 所以，我做了这个。它完美地工作！谢谢，-Aly Abd El Rahman

::scss::

#root {
.App {
    .owl-carousel {
        .owl-nav {
            .owl-prev {
                height: 80px;
                width: 40px;
                position: absolute;
                top: 47%;
                transform: translateY(-50%);
                cursor: pointer;
                left: 21px;
                background: transparent
                    url(../../../assets/arrow-left-dark.svg) no-repeat 50%;
                transform: translateY(-50%);
                span {
                    visibility: hidden;
                }
            }
            .owl-next {
                height: 80px;
                width: 40px;
                position: absolute;
                top: 47%;
                transform: translateY(-50%);
                cursor: pointer;
                right: 21px;
                background: transparent
                    url(../../../assets/arrow-left-dark.svg) no-repeat 50%;

                transform: translateY(-50%) rotate(180deg);
                span {
                    visibility: hidden;
                }
            }
        }
        .owl-dots {
            position: absolute;
            top: 89%;
            left: 25vw;
            .active {
                background-color: white !important;
                height: 10px !important;
                width: 10px !important;
                transition: all 0.3s linear !important;
            }
            .owl-dot {
                background: hsla(0,0%,100%,0.3);
                display: inline-block;
                height: 8px;
                width: 8px;
                margin-right: 30px;
                vertical-align: middle;
                border: none;
                transition: all 0.3s linear;
                span {
                    visibility: hidden;
                }
            }
        }
    }
}

}