如何使用next js设计react引导转盘的样式？

Question

我是next.js的新手，我想删除react bootstrap旋转木马左右箭头周围的渐变。我已经尝试对carousel使用内联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控件的左键和右键分别有.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