javascript - 无法覆盖Awesome-slider-react的CSS类(Unable to override css class of Awesome-slider-react)

Question

I am using Awesome-Slider-React to build a small web-app.

(我正在使用Awesome-Slider-React构建一个小型Web应用程序。)

I am facing an issue in styling my content.

(我在设计内容样式时遇到问题。)

Awesome-Slider gives default styling to all the div defined inside <AwesomeSlider> which reduces the div you have access to very small size as seen here .

(AwesomeSlider给出默认样式的所有内部定义的DIV <AwesomeSlider>从而减少因为看到你有机会获得非常小的尺寸股利这里 。)

I want to be able to place my components in the full screen.

(我希望能够在全屏中放置我的组件。)

I tried overriding the class awssld__content but this only works if I supply !important in App.css .

(我尝试覆盖类awssld__content但这仅在我在App.css提供!important时App.css 。)

What is the best way for me to have access to the div which spans the whole viewport.

(对我来说，访问横跨整个视口的div的最佳方法是什么？)

JSX

(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

(App.css)

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

SCSS file from Awesome-Slider.

(来自Awesome-Slider的SCSS文件。)

The complete code for the SCSS file can be seen 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
    }
  }

  ask by Richa Sharma translate from so

Answer 1

等待大神答复