How to use prefixes for inline styles. React

Question

For example.

        return {
        transform: 'rotateY(' + d.rotateY + 'rad) '
        + ' translateX(' + translateX + 'px)'
        + ' translateZ(' + d.translateZ + 'px)'
        + ' rotateY(' + d.rotateYAround + 'deg)',
        ...

How to use 'ms' prefix ?

Possible duplicate of [How do I apply vendor prefixes to inline styles in reactjs?](https://stackoverflow.com/questions/32100495/how-do-i-apply-vendor-prefixes-to-inline-styles-in-reactjs) — Tiago Alves, Dec 07 '17 at 13:27

T Porter · Accepted Answer · 2017-12-07T13:52:17.307

Per the React docs:

Vendor prefixes other than ms should begin with a capital letter. This is why WebkitTransition has an uppercase "W".

So your inline styles would look like this:

return {
  msTransform: 'rotateY(' + d.rotateY + 'rad) ' +
    ' translateX(' + translateX + 'px)' +
    ' translateZ(' + d.translateZ + 'px)' +
    ' rotateY(' + d.rotateYAround + 'deg)',
  ...,

  transform: 'rotateY(' + d.rotateY + 'rad) ' +
    ' translateX(' + translateX + 'px)' +
    ' translateZ(' + d.translateZ + 'px)' +
    ' rotateY(' + d.rotateYAround + 'deg)',
  ...
}

Although I would recommend something that adds prefixes automatically. You might want to look into using a library such as styled-components rather than using inline styles.

Per the styled-components docs:

The CSS rules are automatically vendor prefixed, so you don't have to think about it.

How to use prefixes for inline styles. React

1 Answers1