From 90f32d101f93f179a028c60587b4a7e2d0e1285d Mon Sep 17 00:00:00 2001
From: Mantas Miliukas <mantasm@wix.com>
Date: Fri, 5 Apr 2019 10:10:11 +0300
Subject: [PATCH] chore(example): add use case for mjml-style component

---
 src/email.js | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/email.js b/src/email.js
index ec07b82..8452fab 100644
--- a/src/email.js
+++ b/src/email.js
@@ -9,7 +9,9 @@ import {
   MjmlSection,
   MjmlColumn,
   MjmlButton,
-  MjmlImage
+  MjmlImage,
+  MjmlStyle,
+  MjmlText
 } from 'mjml-react';
 
 export const generate = () => {
@@ -18,6 +20,16 @@ export const generate = () => {
       <MjmlHead>
         <MjmlTitle>Last Minute Offer</MjmlTitle>
         <MjmlPreview>Last Minute Offer...</MjmlPreview>
+        <MjmlStyle>{`
+          .blue-column {
+            background-color: blue;
+          }
+        `}</MjmlStyle>
+        <MjmlStyle inline>{`
+          .red-column {
+            background-color: red;
+          }
+        `}</MjmlStyle>
       </MjmlHead>
       <MjmlBody width={500}>
         <MjmlSection fullWidth backgroundColor="#efefef">
@@ -27,15 +39,19 @@ export const generate = () => {
         </MjmlSection>
         <MjmlSection>
           <MjmlColumn>
-            <MjmlButton
-              padding="20px"
-              backgroundColor="#346DB7"
-              href="https://www.wix.com/"
-            >
+            <MjmlButton padding="20px" backgroundColor="#346DB7" href="https://www.wix.com/">
               I like it!
             </MjmlButton>
           </MjmlColumn>
         </MjmlSection>
+        <MjmlSection>
+          <MjmlColumn cssClass="blue-column">
+            <MjmlText>I am blue</MjmlText>
+          </MjmlColumn>
+          <MjmlColumn cssClass="red-column">
+            <MjmlText>I am red</MjmlText>
+          </MjmlColumn>
+        </MjmlSection>
       </MjmlBody>
     </Mjml>
   );