如何调整反应实现轮播中指标的大小？

问题描述

我希望在反应实现的轮播中增加指标。我正在使用sass模块，并且尝试用！important标志覆盖CSS，但是它不起作用。我想我做对了，但这是我第一次与物有所值，所以我不确定100％。

我的gatsby组件：

import React from "react"
import "materialize-css"
import { Carousel,Button } from "react-materialize"
import "materialize-css/dist/js/materialize.min.js"
import "materialize-css/dist/css/materialize.min.css"
import green from "../images/green.jpg"
import CarouselStyles from "./carousel.module.scss"
const gallery = () => {
  return (
    <Carousel
      carouselId="Carousel-2"
      className="white-text center"
      options={{
        fullWidth: true,indicators: true,}}
    >
      <div className={CarouselStyles.slide1}>
        <img
          src={green}
          alt="betterbackstories"
          style={{ position: "relative" }}
        ></img>
        <div className={CarouselStyles.overlay}>
          <h2>First Panel</h2>
          <p>This is your first panel</p>
          <Button
            href="http://react-materialize.github.io/"
            node="a"
            waves="light"
          >
            Open Me In New Tab
          </Button>
        </div>
      </div>
      <div className="Amber">
        <h2>Second Panel</h2>
        <p>This is your second panel</p>
      </div>
      <div className="green">
        <h2>Third Panel</h2>
        <p>This is your third panel</p>
      </div>
      <div className="blue">
        <h2>Fourth Panel</h2>
        <p>This is your fourth panel</p>
      </div>
    </Carousel>
  )
}

export default gallery

我的sass模块：

.slide1 {
    position: relative !important;

    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;

        background: #00000090;
        height: 100%
    }

    .carousel .indicators .indicator-item {

        height: 16px !important;
        width: 16px !important;
        margin: 24px 8px !important;
        height: 3px !important;
        border-radius: 0px !important;
        width: 25%;
    }

}

.white-text .indicators .indicator-item {
    height: 16px !important;
    width: 16px !important;
    margin: 24px 8px !important;
}

解决方法

我想出了..最后，将其放在项目根目录的通用样式表中。

.carousel .indicators .indicator-item {

    height: 16px !important;
    width: 16px !important;
    margin: 24px 10px !important;
   
}