React Removes Inline Styles

Question

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>

Answer 1

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

Still, this is mso . Does MsoHide work?