chrome和Firefox的内联样式

Question

I am using some inline styles for div in react. So, I've used width: max-content for the div. It's working fine in chrome, but in firefox, I have to use -moz-max-content. So, is there any way to specify styles for both, chrome and firefox, using inline styles in react?

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

I can't use another width key for firefox, it throws me an error.

My react version is 15.6.1

Answer 1

If you will be doing inline-styling in reactjs, then you better use libraries like Radium . It supports automatic vendor prefixing.

Other examples are glamorous css and glamor Both these libraries support vendor prefixing.

Answer 2

This (adding multiple fallback values for the same property using inline styles) is not officially supported, and probably will never be. See this comment by Dan Abramov (and read the whole discussion on the github issue for some history):

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

The solution he suggests:

For example you can use document.createElement('div') to create a DOM node, and then assign .style.myPrefixedProperty and see if it “sticks” by reading from it.

Answer 3

Simply you could use [Autoprefixer][1] for Object Style

If you're still using npm, you may run 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)

They also provide UMD links

<!-- 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>