styled-email-components

💌 styled-email-components

styled-components but with inline styles designed for emails! This is an extension of original API which adopts React Native approach of injecting styles in node or web enviroments.

Installation

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

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

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

Getting Started

styled-email-components uses same syntax to define components, with tagged template literals:

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.

Extra

In addition to full list of html elements, this module provides handy vml, wml and office namespaces for Outlook-specific needs:

import styled from 'styled-email-components';

const RoundRect = styled.vml.roundrect.attrs({
  arcsize: '10%',
  strokecolor: '#1e3650',
  fill: 'true',
})`
  v-text-anchor: middle;
  height: 40px;
  width: 200px;
`;

export default RoundRect;

Note that all styled.vml.*, styled.wml.* and styled.office.* elements are passed as-is and not name or type checked.

API

styled-email-components supports all of necessary APIs for building great emails:

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

License

MIT © Sergey Bekrin