apply styles to child in SlideSet (FormidableLabs#669)

Author: ashika01

README.md

@@ -512,6 +512,18 @@ The slide tag represents each slide in the presentation. Giving a slide tag an `
 | transitionOut      | PropTypes.array  | Specifies the slide transition when the slide exits. Accepts the same values as transition.                                                                                                                                                                                                  | Set by `Deck`'s `transition` prop |
 | transitionDuration | PropTypes.number | Accepts integer value in milliseconds for slide transition duration.                                                                                                                                                                                                                         | Set by `Deck`'s `transition` prop |
 
+#### SlideSet
+
+With `SlideSet`, you can wrap multiple slide in it to apply the same style.
+
+```jsx
+<SlideSet style={{ border: '2px solid red' }}>
+  <Slide>Slide1</Slide>
+  <Slide>Slide2</Slide>
+  <Slide>Slide3</Slide>
+</SlideSet>
+```
+
 <a name="transition-function"></a>
 
 ##### Transition Function

example/src/index.js

@@ -366,8 +366,10 @@ const myCode = (is, great) => 'for' + 'sharing';
           </Heading>
           <Notes>So smooth</Notes>
         </Slide>
-        <SlideSet>
-          <Slide transition={['fade']} bgColor="secondary" textColor="primary">
+        <SlideSet
+          style={{ backgroundColor: 'blue', border: '10px solid cyan' }}
+        >
+          <Slide transition={['fade']} textColor="tertiary">
             <List>
               <Appear>
                 <ListItem>Inline style based theme system</ListItem>

src/components/slide.js

@@ -103,6 +103,7 @@ class Slide extends React.PureComponent {
         exportMode={this.props.export}
         printMode={this.props.print}
         background={this.context.styles.global.body.background}
+        style={this.props.style}
         styles={{
           base: getStyles.call(this),
           presenter: presenterStyle

src/utils/slides.js

@@ -30,7 +30,10 @@ export const getSlideByIndex = (children, slideReference, index) => {
       const setChildren = Children.toArray(
         children[reference.rootIndex].props.children
       );
-      slide = setChildren[reference.setIndex];
+      const style = children[reference.rootIndex].props.style;
+      slide = cloneElement(setChildren[reference.setIndex], {
+        style
+      });
     }
   }
   return slide;