switch to styled components for raw renderer

1 files changed, 11 insertions, 10 deletions

diff --git a/frontend/src/components/renderers/Raw.js b/frontend/src/components/renderers/Raw.js
index a8d0e31..7f8e7c1 100644
--- a/frontend/src/components/renderers/Raw.js
+++ b/frontend/src/components/renderers/Raw.js
@@ -1,6 +1,15 @@
 import React from 'react';
+import styled from 'styled-components'
 import { FetchPaste } from '../../helpers/httpHelper'
 
+const RawText = styled.pre`
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    line-height: initial;
+    font-size: 0.8em;
+    padding: 0 1em;
+`
+
 class Raw extends React.Component {
 
     constructor(props) {
@@ -11,18 +20,10 @@ class Raw extends React.Component {
     }
 
     render() {
-        const styles = {
-            wordWrap: "break-word",
-            whiteSpace: "pre-wrap",
-            lineHeight: "initial", 
-            fontSize: "0.8em",
-            padding: "0 1em"
-        }
-
         return (
-            <pre style={styles}>
+            <RawText>
                 {this.state.content}
-            </pre>
+            </RawText>
         );
     }