styled-email-components
Advanced tools
Weekly downloads
Readme
Extension of styled-components (v5.x)
with
essential features for building email components.
styled.*
aliases are XHTML compliantstyled-components
is a universal styling solution with great developer
experience and low learning curve. Unfortunately, there's no native support for
inline styling which is essential for building emails. This module adds all
necessary features to build mail-first components.
yarn:
yarn add styled-email-components
npm:
npm install --save styled-email-components
Check original Getting Started for more examples.
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;
`;
renderToStaticMarkup(<Link href="https://example.com">Hey</Link>),
// 👇 output
// <a href="https://example.com" style="font-family:sans-serif;background-color:blue;color:white;">Hey</a>
styled.*
This module sets list of XHTML 1.0 Transitional element aliases instead of the original HTML5 set, which is a widely used doctype in emails.
In addition to XHTML elements, styled.vml.*
, styled.wml.*
and
styled.office.*
aliases are available. These are simple proxies and pass tag
names as-is with v:
, w:
and o:
prefixes respectively.
Original APIs are mirrored without
any modifications from styled-components
. Make sure to check
server-side rendering
guide for rendering the final email.
MIT © Sergey Bekrin
FAQs
💌 styled-components for emails
The npm package styled-email-components receives a total of 955 weekly downloads. As such, styled-email-components popularity was classified as not popular.
We found that styled-email-components demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.