chore(example): add use case for mjml-style component

wix-incubator · Apr 5, 2019 · 90f32d1 · 90f32d1
1 parent 2138af3
commit 90f32d1
Showing 1 changed file with 22 additions and 6 deletions.
diff --git 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>
   );