Support inlining styles

Styled-components is great. It’s the approach that i’d like to use in several projects in react-native and web. The problem is, one of those projects involves a page written in react that gets rendered to an email. Best practices for email often involve inlining styles to support the wide variety of clients that render emails. I totally realize there’s some irony in requesting that styled-components support this. At this point, i’m curious as to a workaround where i can obtain the list of props for a given styled component to pass into an inline style prop (obviously this wouldn’t support media queries / hover etc… ).

If styled-components supported this, projects that render their email through react would be able to use styled components for their emails. This is super important as a lot of work goes into creating reusable css components across an entire project, and its important that style-guide components are consistent through emails and the work that goes into creating these clean reusable components can be carried into the much more difficult landscape of email html rendering.

const EmailHeader=styled.div`
  margin-top: ${gap.large};
  ${type.mediumSize()};
  color: ${color.phantomGrey};
`

export default function({user}) => (
    <div> 
      <EmailHeader inlined>Welcome to homeward! {user.name}</EmailHeader>
   </div>
)

Another idea

const EmailHeader=css`
  margin-top: ${gap.large};
  ${type.mediumSize()};
  color: ${color.phantomGrey};
`

export default function({user}) => (
    <div> 
      <EmailHeader style={...EmailHeader.cssRules}>Welcome to homeward! {user.name}</EmailHeader>
   </div>
)

[weaintplastic]

just in case someone stumbles over this and is looking for a solution: We’ve built a little library for rendering inline css for emails in javascript/react. https://github.com/researchgate/inline-stylesheet

[mxstbr]

We don’t want to add any configuration to styled-components for a variety of reasons. That being said, this does sound very useful.

I’m wondering, could we make this another package (styled-components-email?) which renders to inline styles rather than the DOM and then dynamically switch out the imports?