时间戳

首页 > 解决方案 > How to style react bootstrap carousel with next js?

reactjs - How to style react bootstrap carousel with next js?

问题描述

I am new to next.js and I would like to remove the gradient around the arrows to the left and right of the react bootstrap carousel. I have tried inline CSS for the carousel and I am using styled-components for the rest of my components.

标签： reactjscarouseljsxreact-bootstrapnext.js

解决方案

react-bootstrap 包的官方文档说它使用 Bootstrap v3 样式：

React-Bootstrap 目前针对 Bootstrap v3。要使用 React-Bootstrap，请包含适用于 Bootstrap v3 而不是 Bootstrap v4 的 CSS。

如果我们查看 bootstrap.css 文件，我们可以看到轮播控件的左右按钮分别具有 .carousel-control.left 和 .carousel-control.right 类名。所以我们可以使用 styled-components 嵌套特性来指定 CarouselWrapper 组件，该组件将覆盖默认控件背景样式（您绝对应该在此处使用 bootstrap 源中的其他类样式属性，为了清楚起见我省略了它们）。

 const CarouselWrapper = styled.div`
   .carousel-control.left,
   .carousel-control.right {
     background: none;
   }
 `;

这有点“猴子修补”的方法，但我找不到另一种方法来为轮播控件背景传递自定义样式。

在此处查看完整的概念验证代码：https ://codesandbox.io/s/pypkzo5kz0

推荐阅读