[React Style] How to use CSS hack?

Jump to bottom Edit New page

Hill Liu edited this page May 17, 2018 · 2 revisions

How to prepend browser prefix.

CSS Sample (Output)

<style>
.your-selector {
  transform: translate(-12%, -50%);
  -moz-transform: translate(-12%, -50%);
  -ms-transform: translate(-12%, -50%);
  -webkit-transform: translate(-12%, -50%);
}
</style>

Use ReactStyle

reactStyle(
  {
    transform: ['translate(-12%, -50%)']
  },
  '.your-selector'
);

Same CSS Key but different value, such as inline-flex

CSS Sample (Output)

<style>
.your-selector {
  display: inline-flex;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
}
</style>

Use ReactStyle

reactStyle(
  {
    display: ['inline-flex', '-webkit-inline-box', '-ms-inline-flexbox']
  },
  '.your-selector'
);