diff --git a/example/index.jsx b/example/index.jsx
index 31a02b5..2d6168a 100644
--- a/example/index.jsx
+++ b/example/index.jsx
@@ -42,6 +42,21 @@ class App extends Component {
             Content Right
             <Arrow/>
           </Popper>
+          <Popper placement="top" modifiers={ {
+                          customStyle: {
+                            enabled: true,
+                            'function': function(data) {
+                              data.styles = {
+                                ...data.styles,
+                                background: 'red',
+                              };
+                              return data
+                            }.bind(this)
+                          },
+                        } }>
+            Custom Style
+            <Arrow/>
+          </Popper>
           <Popper placement={placement}>
             Dynamic Content
             <Arrow/>
diff --git a/example/main.scss b/example/main.scss
index 98d3fea..5a92dc6 100644
--- a/example/main.scss
+++ b/example/main.scss
@@ -10,6 +10,10 @@ html {
   font-family: 'Lato', sans-serif;
 }
 
+select {
+  margin-bottom: 3rem;
+}
+
 .popper {
   background: #222;
   color: white;
diff --git a/src/Popper.jsx b/src/Popper.jsx
index 6f0744e..f041377 100644
--- a/src/Popper.jsx
+++ b/src/Popper.jsx
@@ -139,8 +139,10 @@ class Popper extends Component {
       left,
       position,
     } = this.state.data.offsets.popper
+    const styles = this.state.data.styles
 
     return {
+      ...styles,
       position,
       top:        0,
       left:       0,