无法更改react-elastic-carousel中的点的样式

Question

我正在为一个项目使用react-elastic-carousel，但是找不到一种方法来改变点的颜色(分页)。如何更改点和活动点的颜色？

import React, {Component} from 'react';
import Item from '../Item/Item';
import Carousel from 'react-elastic-carousel';

import classes from './Test.module.css';

class Gallery extends Component {

    render() {
        return (
            <div>
                <Carousel
                    itemsToShow={1}
                    style={{backgroundColor: 'red', color: 'white'}}
                >
                    <Item>1</Item>
                    <Item>2</Item>
                    <Item>3</Item>
                    <Item>4</Item>
                    <Item>5</Item>
                    <Item>6</Item>
                </Carousel>
            </div>
        )
    }
}

export default Gallery;

Answer 1

在你的样式表中使用下面的。

button.rec-dot{
  background-color: rgb(235, 16, 16);
  box-shadow: 0 0 1px 3px rgba(235, 16, 16, 0.5);
}

button.rec-dot:hover, button.rec-dot:active, button.rec-dot:focus  {
  box-shadow: 0 0 1px 3px rgba(235,16,16,0.5);
}

Answer 2

你可以通过编辑CSS来改变分页点的颜色，你会得到这个rec-dot的类，从那里你可以编辑高度，宽度和颜色的dots.there是一个单独的活动点的类。我不知道是否有默认的样式方法，但我这样做也是为了同样的目的。

Answer 3

这里有一个关于react-elastic-carousel的有用资源：

DOCUMENTATION HERE

/* hide disabled buttons */
.rec.rec-arrow:disabled {
    visibility: hidden;
}

/* disable default outline on focused items */
/* add custom outline on focused items */
.rec-carousel-item:focus {
    outline: none;
    box-shadow: inset 0 0 1px 1px lightgrey;
}