时间戳

首页 > 解决方案 > 反应中chrome和firefox的内联样式

css - 反应中chrome和firefox的内联样式

问题描述

我在反应中为 div 使用了一些内联样式。所以，我使用了 width: max-content 作为 div。它在 chrome 中运行良好，但在 Firefox 中，我必须使用 -moz-max-content。那么，有没有办法在 react 中使用内联样式来指定 chrome 和 firefox 的样式？

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

我不能为 Firefox 使用另一个宽度键，这会引发错误。

我的反应版本是 15.6.1

标签： cssreactjsinline-styles

解决方案

只需将 [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>

推荐阅读