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

Свойства CSS в React не добавляются автоматически с префиксами поставщиков.

Например, с:

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

В Safari вращение не применялось.

Как мне добиться этого?


reactjs css vendor-prefix
person zealoushacker    schedule 19.08.2015    source источник

Ответы (4)


arrow_upward
105
arrow_downward

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',
    ]
  }
};
person zealoushacker    schedule 19.08.2015
comment
Обратите внимание, что префиксы ms должны быть строчными, в отличие от префиксов webkit с заглавной буквы: zhenyong.github .io/react/tips/inline-styles.html - person Bryan Downing; 29.10.2017

arrow_upward
1
arrow_downward

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

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

person Samuell    schedule 19.08.2015
comment
prefixfree великолепен, просто убедитесь, что повторно вызываете window.StyleFix.process(), если содержимое вашей страницы обновляется (например, обратный вызов навигации маршрутизатора) - person Nick; 29.10.2015

arrow_upward
1
arrow_downward

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

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

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

person fabio.sussetto    schedule 19.08.2015

arrow_upward
1
arrow_downward

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

префиксер реакции

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

person tquetano-r7    schedule 01.09.2015