diff --git a/.flowconfig b/.flowconfig
index edf3e02b..0bccd759 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -1,9 +1,10 @@
 [ignore]
-.*/node_modules/react/.*
-.*/node_modules/babel.*
-.*/node_modules/fbjs/.*
-.*/node_modules/express/.*
-.*/node_modules/serve-index/.*
+<PROJECT_ROOT>/node_modules/react/.*
+<PROJECT_ROOT>/node_modules/babel.*
+<PROJECT_ROOT>/node_modules/fbjs/.*
+<PROJECT_ROOT>/node_modules/styled-components/src/.*
+<PROJECT_ROOT>/node_modules/express/.*
+<PROJECT_ROOT>/node_modules/serve-index/.*
 .*test
 
 [include]
diff --git a/css/styles.css b/css/styles.css
deleted file mode 100644
index 15ab0d87..00000000
--- a/css/styles.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.react-resizable {
-  position: relative;
-}
-.react-resizable-handle {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  bottom: 0;
-  right: 0;
-  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
-  background-position: bottom right;
-  padding: 0 3px 3px 0;
-  background-repeat: no-repeat;
-  background-origin: content-box;
-  box-sizing: border-box;
-  cursor: se-resize;
-}
diff --git a/lib/Resizable.jsx b/lib/Resizable.jsx
index 8ec53926..61c393f8 100644
--- a/lib/Resizable.jsx
+++ b/lib/Resizable.jsx
@@ -2,6 +2,7 @@
 import {default as React, PropTypes} from 'react';
 import {DraggableCore} from 'react-draggable';
 import cloneElement from './cloneElement';
+import styled from 'styled-components';
 
 type Position = {
 
@@ -167,7 +168,7 @@ export default class Resizable extends React.Component {
     // eslint-disable-next-line no-unused-vars
     const {children, draggableOpts, width, height,
         handleSize, lockAspectRatio, minConstraints, maxConstraints, onResize,
-        onResizeStop, onResizeStart, ...p} = this.props;
+        onResizeStop, onResizeStart, style, ...p} = this.props;
 
     const className = p.className ?
       `${p.className} react-resizable`:
@@ -179,6 +180,7 @@ export default class Resizable extends React.Component {
     // A draggable handle.
     return cloneElement(children, {
       ...p,
+      style: {position: 'relative', ...style},
       className,
       children: [
         children.props.children,
@@ -190,9 +192,25 @@ export default class Resizable extends React.Component {
           onStart={this.resizeHandler('onResizeStart')}
           onDrag={this.resizeHandler('onResize')}
           >
-          <span className="react-resizable-handle" />
+          <ResizeHandle className="react-resizable-handle" />
         </DraggableCore>
       ]
     });
   }
 }
+
+const ResizeHandle = styled.span`
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  bottom: 0;
+  right: 0;
+  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
+  background-position: bottom right;
+  padding: 0 3px 3px 0;
+  background-repeat: no-repeat;
+  background-origin: content-box;
+  box-sizing: border-box;
+  cursor: se-resize;
+`;
+
diff --git a/package.json b/package.json
index 28e9ee81..2a11d280 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,8 @@
     "webpack-dev-server": "^1.14.1"
   },
   "dependencies": {
-    "react-draggable": "^2.1.0"
+    "react-draggable": "^2.1.0",
+    "styled-components": "^1.0.0"
   },
   "peerDependencies": {
     "react": "^0.14.0 || ^15.0.0",
diff --git a/test/TestLayout.jsx b/test/TestLayout.jsx
index c67f398f..25c30884 100644
--- a/test/TestLayout.jsx
+++ b/test/TestLayout.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import Resizable from '../lib/Resizable';
 import ResizableBox from '../lib/ResizableBox';
-import 'style!css!../css/styles.css';
 
 export default class TestLayout extends React.Component {
   state = {width: 200, height: 200};