styled-email-components

💌 styled-email-components

styled-components for emails. This is an extension of original API which adopts React Native like approach of injecting styles.

• Motivation
• Installation
• Getting Started
• Differences
• API
• License

Motivation

styled-components is a universal styling solution for various target environments with great developer experience and low learning curve. Unfortunately there's no way of using it natively to build React-based emails due to email clients limitations. This module adds all nessecary features to build mail-first components.

Installation

# yarn
yarn add styled-email-components styled-components

# npm
npm install --save styled-email-components styled-components

ℹ️ Don't forget to install styled-components itself as a peer dependency.

Getting Started

styled-email-components uses same syntax to define components:

import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import styled from 'styled-email-components';

const Link = styled.a`
  font-family: sans-serif;
  background: blue;
  color: white;
`;

// That works 😱
console.assert(
  renderToStaticMarkup(<Link href="https://example.com">Hey</Link>),
  '<a href="https://example.com" style="font-family:sans-serif;background-color:blue;color:white;">Hey</a>',
);

Check original Gettings Started for more examples.

Differences

These are key differences compared to original implementation:

• Styles are set inline
• styled.* aliases uses XHTML 1.0 Transitional list of elements instead of HTML5
• Outlook specific styled.vml.*, styled.wml.* and styled.office.* elements are proxied
• Hex colors are expanded to 6 characters

API

styled-email-components modifies only styled implementation and mirrors rest of API as-is:

• styled
  • .attrs
  • .extend
  • .withComponent
• css
• injectGlobal
• isStyledComponent
• withTheme
• ThemeProvider
• Server-side rendering

License

MIT © Sergey Bekrin