如何使用下一个 js 设置反应引导轮播的样式？

Posted 2023-02-22

【中文标题】如何使用下一个 js 设置反应引导轮播的样式？

【英文标题】：How to style react bootstrap carousel with next js?

【发布时间】：2019-05-04 16:10:50

【问题描述】：

我是 next.js 的新手，我想移除 react bootstrap carousel 左右箭头周围的渐变。 我已经为轮播尝试了内联 CSS，并且我在我的其余组件中使用了 styled-components。

【问题讨论】：

请在您的问题中包含代码。我建议你创建一个沙箱来举个例子。

【参考方案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 类名。所以我们可以使用 styled-components 嵌套特性来指定 CarouselWrapper 组件，该组件将覆盖默认控件背景样式（您绝对应该在这里使用 bootstrap 源中的其他类样式属性，为了清楚起见，我省略了它们）。

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

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

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