reactjs - 无法更改 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;

标签： reactjscarousel

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);
}