feat: add activeItemClass prop

[ubmit]

react-multi-carousel is lacking a way to style the active item(s) without overriding the class defined by the package itself (react-multi-carousel-item--active).

I think that this does not fit well when you are using CSS in JS or CSS Modules, so I added a new prop called activeItemClass that accepts a class.

Usage:

• CSS Modules

.foo {
	border: 1px solid red;
}

import styles from "Styles.module.css";

const Component = () => (
	<Carousel activeItemClass={styles.foo}>
	  // ...slides
	</Carousel>
);

• MUI (withStyles HOC)

const styles = theme => ({
	foo: {
		border: "1px solid red",
	}
})

const Component = ({ classes })) => (
	<Carousel activeItemClass={classes.foo}>
	  // ...slides
	</Carousel>
);

<li class="react-multi-carousel-item react-multi-carousel-item--active foo">...</li>

Preview:

<li data-index="2" aria-hidden="false" style="flex: 1 1 auto; position: relative; width: 275px;" class="react-multi-carousel-item react-multi-carousel-item--active Index-activeItemClass-150 image-item"><img draggable="false" style="width: 100%; height: 100%; position: relative;" src="https://images.unsplash.com/photo-1550133730-695473e544be?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" alt="w3js -> web front-end studio"></li>

If this feature makes sense to the project I'd be glad to help updating the docs and doing any work related to this feature.

Thanks!

[YIZHUANG]

Looks good.

[abhinavdalal]

@guilhermedeandrade @YIZHUANG I think that longer term maintainability and epandibility.. it may be better to follow mui pattern of taking a classes object prop whose keys are well documented..

CSS Modules

.container {
  width: 90%;
  margin: auto;
}
.item {
  border: 1px solid grey;
}
.activeItem {
  border: 1px solid red;
} 

import overrideClasses from "MyComponent.module.css";

const MyComponent = () => (
	<Carousel classes={overrideClasses}>
	  // ...slides
	</Carousel>
);

[ubmit]

@guilhermedeandrade @YIZHUANG I think that longer term maintainability and epandibility.. it may be better to follow mui pattern of taking a classes object prop whose keys are well documented..

CSS Modules

.container {
  width: 90%;
  margin: auto;
}
.item {
  border: 1px solid grey;
}
.activeItem {
  border: 1px solid red;
} 

import overrideClasses from "MyComponent.module.css";

const MyComponent = () => (
	<Carousel classes={overrideClasses}>
	  // ...slides
	</Carousel>
);

Hey there @abhinavdalal! To be honest, I don't like this approach, because we would need to have a specific CSS file for the Carousel itself. Most of the cases we will probably have something wrapping the Carousel and also siblings. I'd rather have the Carrousel related CSS inside a single Component.module.css file instead of both Component.module.css and Carousel.module.css.

[YIZHUANG]

@guilhermedeandrade @YIZHUANG I think that longer term maintainability and epandibility.. it may be better to follow mui pattern of taking a classes object prop whose keys are well documented..

CSS Modules

.container {
  width: 90%;
  margin: auto;
}
.item {
  border: 1px solid grey;
}
.activeItem {
  border: 1px solid red;
} 

import overrideClasses from "MyComponent.module.css";

const MyComponent = () => (
	<Carousel classes={overrideClasses}>
	  // ...slides
	</Carousel>
);

I like this approach, and i have been using it in my project, its better than just className and itemClass

[ubmit]

This PR is too old, this branch would need to be rebased and probably the suggested changes won't even work anymore. I'd suggest anyone with a similar issue/idea to follow #341