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

我正在使用Awesome-Slider-React构建一个小型Web应用程序。我在设计内容样式时遇到问题。 Awesome-Slider为<AwesomeSlider>中定义的所有div赋予默认样式，这将使您可以访问的div很小，如here所示。我希望能够在全屏中放置我的组件。我尝试覆盖类awssld__content，但这仅在我在!important中提供App.css时有效。对我来说，访问横跨整个视口的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>

App.css

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

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

  &__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
    }
  }

最佳答案

我也面临同样的挑战。

一种方法是引用.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。

祝好运