styled components over inline css

frontend/scenes/Document/Document.js

@@ -171,13 +171,12 @@ type Props = {
           </CenteredContent>}
         {!isFetching &&
           this.document &&
-          <DropToImport
+          <StyledDropToImport
             documentId={this.document.id}
             history={this.props.history}
             onDragEnter={this.onStartDragging}
             onDragLeave={this.onStopDragging}
             onDrop={this.onStopDragging}
-            style={{ display: 'flex', flex: 1 }}
           >
             <Flex justify="center" auto>
               <Prompt
@@ -215,7 +214,7 @@ type Props = {
                 </Flex>
               </Meta>
             </Flex>
-          </DropToImport>}
+          </StyledDropToImport>}
       </Container>
     );
   }
@@ -263,4 +262,9 @@ const DocumentContainer = styled.div`
   width: 50em;
 `;
 
+const StyledDropToImport = styled(DropToImport)`
+  display: flex;
+  flex: 1;
+`;
+
 export default withRouter(inject('ui', 'user', 'documents')(DocumentScene));