无法覆盖Awesome react的css类

Question

我正在使用Awesome-Slider-React构建一个小的web应用程序。我在设计我的内容时遇到了一个问题。<AwesomeSlider> -Slider为所有定义在here中的div提供了默认的样式，它减少了你可以访问的非常小的div大小。我希望能够在全屏中放置我的组件。我尝试重写awssld__content类，但只有在App.css中提供!important时才有效。访问跨越整个视口的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的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
    }
  }

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。

祝好运