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

【问题标题】：Is there any way to customize the navigation arrows and dots of "react-owl-carousel" in react using css or js?有没有办法在使用 css 或 js 时自定义“react-owl-carousel”的导航箭头和点？
【发布时间】：2021-06-13 06:24:08
【问题描述】：

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

我想改变这些形状/样式.????

【问题讨论】：

当然您可以通过多种方式，对于 css 方式，您可以选择箭头（id - 类名）库提供给您的任何内容，您可以从 dom 检查器中看到它，然后在右侧它和你一起自定义 css
请创建一个minimal reproducible example，就像一个密码箱。

标签： javascript css reactjs carousel

【解决方案1】：

“选择箭头（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;
                }
            }
        }
    }
}

}

【讨论】：