CODEWITHSUNDEEP
javascriptreactjsinline-styles
JWK
JWK

Reputation: 3780

React Removes Inline Styles

I'm writing an HTML email using React. Like any good HTML email, I'm using inline styles that target legacy clients such as Microsoft Outlook. Some styles are being removed by React during rendering. How do I add support for these styles or work around this issue? Styles must be inlined.

Here's an example:

function MyComponent() {
  const style = {
    fontFamily: 'Arial, Helvetica, sans-serif',
    msoHide: 'all'
  }

  return(
    <div style={style}>
      Some text goes here...
    </div>
  )
}

When rendered, the mso-hide: all style is removed:

<div style="font-family: Arial, Helvetica, sans-serif;">
  Some text goes here...
</div>

Upvotes: 2

Views: 1603

Answers (1)

Alexander van Oostenrijk
Alexander van Oostenrijk

Reputation: 4754

The docs say that vendor-specific properties in a style object must start with a capital letter, e.g. WebkitAppearance rather than webkitAppearance. They also say that ms is an exception to that rule. See here.

Still, this is mso. Does MsoHide work?

Upvotes: 2

Related Questions