Встроенный стиль для Chrome и Firefox в реакции - PullRequest
Новая
       7

Встроенный стиль для Chrome и Firefox в реакции

0 голосов
/ 25 апреля 2018

Я использую некоторые встроенные стили для div в реаги.Итак, я использовал width: max-content для div.Он отлично работает в Chrome, но в Firefox я должен использовать -moz-max-content.Итак, есть ли способ указать стили для обоих, Chrome и Firefox, используя встроенные стили в реагировать? 

const divStyle = {
    margin: 'auto',
    width: 'max-content',
    fontSize: 24
  }

Я не могу использовать другой ключ ширины для Firefox, это выдает мне ошибку.

Моя версия реакции 15.6.1

Ответы [ 3 ]

0 голосов
/ 25 апреля 2018

Это (добавление нескольких резервных значений для одного и того же свойства с использованием встроенных стилей) официально не поддерживается и, вероятно, никогда не будет.Посмотрите этот комментарий Дана Абрамова (и прочитайте всю дискуссию по проблеме GitHub для некоторой истории):

https://github.com/facebook/react/issues/6467#issuecomment-354781011

Решение, которое он предлагает:

Например, вы можете использовать document.createElement('div') для создания узла DOM, а затем назначить .style.myPrefixedProperty и посмотреть, «залипает» ли он, читая с него.

0 голосов
/ 25 апреля 2018

Просто вы можете использовать [Autoprefixer] [1] для стиля объекта

Если вы все еще используете npm, вы можете запустить npm i --save inline-style-prefixer. 

import Prefixer from 'inline-style-prefixer'

const divStyle = {
    margin: 'auto',
    width: 'max-content',
    fontSize: 24
  }

const prefixer = new Prefixer()
const prefixedStyle = prefixer.prefix(divStyle)

Они также предоставляют UMDссылки 

<!-- Unminified versions -->
<script src="https://unpkg.com/inline-style-prefixer@3.0.1/dist/inline-style-prefixer.js"></script>
<script src="https://unpkg.com/inline-style-prefixer@3.0.1/dist/inline-style-prefix-all.js"></script>
<!-- Minified versions -->
<script src="https://unpkg.com/inline-style-prefixer@3.0.1/dist/inline-style-prefixer.min.js"></script>
<script src="https://unpkg.com/inline-style-prefixer@3.0.1/dist/inline-style-prefix-all.min.js"></script>
0 голосов
/ 25 апреля 2018

Если вы будете делать inline-стилевое оформление вactjs, то вам лучше использовать такие библиотеки, как Radium . Он поддерживает автоматический префикс поставщика.

Другие примеры: гламурный css и гламур Обе эти библиотеки поддерживают префиксы поставщиков.

...