Javascript 无法重写的css类

我正在使用它来构建一个小型web应用程序。我在设计我的内容时遇到了一个问题。Awesome Slider为

中定义的所有div提供默认样式。我希望能够在全屏幕上放置我的组件。我尝试重写类
awssld\u内容
，但这仅在我提供
时有效！重要信息
在
App.css
中。对我来说，访问跨越整个视口的div的最佳方式是什么

JSX

来自Awesome滑块的SCSS文件。可以看到SCSS文件的完整代码

我也有同样的挑战

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

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

您还需要在React应用程序中配置sass加载程序（安装节点sass和sass加载程序）

我想，这样做的缺点是SASS文件会在一段时间内被传输。这可能会影响性能。。。所以不确定这是否是生产的最佳实践

还应该可以传输定制的SASS文件，以便更新/DIST版本。我自己也试过，但没能成功。也许有人知道怎么做

最后一件事：我使用webpack构建和加载我的react应用程序。由于webpack（4.41.5）和sass loader（8.x）的版本冲突，出现了一个错误。错误是
TypeError:this.getResolve…
。我找到的修复程序是将sass loader降级到7.3.1

祝你好运

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

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

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