Как применить префиксы поставщика к встроенным стилям в responsejs?

Ответ 1

React не применяет префиксы поставщика автоматически.

Чтобы добавить префиксы поставщика, назовите префикс поставщика в соответствии со следующим шаблоном и добавьте его как отдельную ссылку:

-vendor-specific-prop: 'value'

становится:

VendorSpecificProp: 'value'

Итак, в примере в вопросе он должен стать:

<div style={{
    transform: 'rotate(90deg)',
    WebkitTransform: 'rotate(90deg)'
}}>Hello World</div>

Префикс значения не может быть выполнен таким образом. Например, этот CSS:

background: black;
background: -webkit-linear-gradient(90deg, black, #111);
background: linear-gradient(90deg, black, #111);

Поскольку объекты не могут иметь дубликаты ключей, это можно сделать только, зная, какой из них поддерживает браузер.

Альтернативой было бы использовать Radium для инструментальной привязки стиля. Одной из его особенностей является автоматическое префикс поставщика.

Наш фоновый пример в радие выглядит следующим образом:

var styles = {
  thing: {
    background: [
      'linear-gradient(90deg, black, #111)',

      // fallback
      'black',
    ]
  }
};

Ответ 2

Вы можете использовать что-то вроде этого:

https://github.com/cgarvis/react-vendor-prefix

для автоматического префикса поставщика ваших объектов стиля.

Ответ 3

На самом деле я столкнулся с одной и той же проблемой, и ни одна из обработанных библиотек префикса не выполнила задание, которое я хотел. Поэтому я сам построил:

react-prefixer

Он все еще довольно молодой (построил это сегодня утром), но я буду его поддерживать. Надеюсь, это поможет.

Ответ 4

У меня нет опыта работы с response.js, но посмотрите на эту js-библиотеку от Lea Verou. Он префикрует стиль непосредственно в DOM.

http://leaverou.github.io/prefixfree/