javascript - 无法覆盖 Awesome-slider-react 的 css 类

Question

我正在使用 Awesome-Slider-React构建一个小型网络应用程序。我在设置内容样式时遇到问题。 Awesome-Slider 为 <AwesomeSlider> 中定义的所有 div 提供默认样式这将您可以访问的 div 减小到非常小的尺寸，如 here 所示.我希望能够将我的组件放在全屏中。我尝试覆盖类 awssld__content但这只有在我提供 !important 时才有效在 App.css .对我来说访问跨越整个视口(viewport)的 div 的最佳方式是什么。

JSX

<AwesomeSlider cssModule={AwesomeSliderStyles}>
<div className = "main" style = {{ backgroundColor: "white" }}> <About/></div>
<div className = "main" style = {{ backgroundColor: "white"}} >
    <BarChart
      data={data}
      title={"check"}
      color="#70CAD1"
    />
    <LineChart
      data={data1}
      title={"check"}
      color="#70CAD1"
    />
</div>
<div>
  <Col lg="8" md="12" sm="12" className="mb-4">
    <UsersOverview />
  </Col>
</div> 
</AwesomeSlider>

应用.css

.main {
  display: grid;
  justify-content: left;
}
.awssld__content {
  align-items: left ;
  justify-content: left !important;
}

来自 Awesome-Slider 的 SCSS 文件。 SCSS文件的完整代码可以看here.

  &__content {
    @extend %fill-parent;
    background-color: var(--content-background-color);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    > img,
    > video {
      object-fit: cover;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    &--enter {
      // On content enter
    }
    &--exit {
      // On content exit
    }
  }

Answer 1

我遇到了同样的挑战。

一种方法是引用 .scss (SASS) 样式表而不是/dist 文件夹中的 .css。最新的是 SASS 样式表的丑化构建版本。

//import 'react-awesome-slider/dist/styles.css';
import 'react-awesome-slider/src/styles.js';

您还需要在 React 应用程序中配置一个 sass-loader(安装 node-sass 和 sass-loader)。

我猜，这样做的缺点是 SASS 文件会按卷轴时间进行转译。这可能会降低性能……所以不确定这是否是生产的最佳实践。

也应该可以转译定制的 SASS 文件，因此/DIST 版本将被更新。我自己试过了，但没能成功。也许有人知道该怎么做？

最后一件事:我使用 webpack 构建和加载我的 React 应用程序。由于 webpack (4.41.5) 和 sass-loader (8.x) 版本冲突导致错误。错误是 TypeError: this.getResolve ...。我发现的修复是将 sass-loader 降级到 7.3.1。

祝你好运