Question

我是next.js的新手，我想删除react bootstrap轮播左右两侧箭头周围的渐变。我已经尝试过将内联CSS用于轮播，并且其余组件都使用了样式化组件。

Answer 1

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

React-Bootstrap currently targets Bootstrap v3. To use React-Bootstrap, include the CSS for Bootstrap v3 instead of Bootstrap v4.

如果我们look through bootstrap.css file，我们可以看到轮播控件分别具有左，右按钮的.carousel-control.left和.carousel-control.right类名。因此，我们可以使用样式化组件嵌套功能来指定CarouselWrapper组件，该组件将覆盖默认控件的背景样式（您肯定应该在此处使用引导程序源中的其他类样式属性，为清楚起见，我将其省略）。

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

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

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

如何用下一个js样式化bootstrap轮播？

1 个答案: