Merge pull request #42 from tpinne/feature/basic-styled-components-su…

…pport [Feature] Basic styled components support
YIZHUANG · Jul 12, 2019 · 8152a4a · 8152a4a
2 parents cae7f32 + b3cfeba
commit 8152a4a
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/src/Carousel.tsx b/src/Carousel.tsx
@@ -587,6 +587,7 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
       centerMode,
       additionalTransfrom,
       renderDotsOutside,
+      className,
     } = this.props;
     throwError(this.state, this.props);
     const {
@@ -621,7 +622,7 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
     return (
       <>
         <div
-          className={`react-multi-carousel-list ${containerClass}`}
+          className={`react-multi-carousel-list ${containerClass} ${className}`}
           ref={this.containerRef}
         >
           <ul

diff --git a/src/types.ts b/src/types.ts
@@ -28,6 +28,7 @@ export interface CarouselProps {
   sliderClass?: string; // Use this to style your own track list.
   itemClass?: string; // Use this to style your own Carousel item. For example add padding-left and padding-right
   containerClass?: string; // Use this to style the whole container. For example add padding to allow the "dots" or "arrows" to go to other places without being overflown.
+  className?: string;  // Use this to style the whole container with styled-components
   dotListClass?: string; // Use this to style the dot list.
   keyBoardControl?: boolean;
   centerMode?: boolean; // show previous and next set of items paritially