Question

我想将回退样式属性应用于组件。例如：

var inlineStyle = {
    display: '-webkit-box',
    display: '-webkit-flex',
    display: '-moz-box',
    display: '-moz-flex',
    display: '-ms-flexbox',
    display: 'flex'
}
return <div style={inlineStyle}>{divContent}</div>;

有没有办法做到这一点？目前他们被忽略了。

Answer 1

在React Github页面上存在此问题（https://github.com/facebook/react/issues/2020）Paul O'Shannessy表示目前无法做到这一点。

你应该：

功能/浏览器检测
使用常规CSS

Answer 2

每个声明都会覆盖最后一个声明，因为它们都具有相同的键名。当属性值需要前缀时，对象文字语法是有问题的，即使在今天（2016年9月6日），解决方案中也没有烘焙。

我自己，需要解决这个问题，想留在CSS-in-JS的土地上（欢迎完全自包含的组件）并且不添加构建步骤，所以创建了一个简单的包称为Style It这只是让你编写CSS。

npm install style-it --save

功能语法（JSFIDDLE）

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return Style.it(`
      .flex-container {
        padding: 0;
        margin: 0;
        list-style: none;

        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;

        -webkit-flex-flow: row wrap;
        justify-content: space-around;
      }

      .flex-item {             
        background: tomato;
        padding: 5px;
        width: 200px;
        height: 150px;
        margin-top: 10px;

        line-height: 150px;
        color: white;
        font-weight: bold;
        font-size: 3em;
        text-align: center;
      }
    `,
      <ul class="flex-container">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
        <li class="flex-item">4</li>
        <li class="flex-item">5</li>
        <li class="flex-item">6</li>
      </ul>
    );
  }
}

export default Intro;

JSX语法（JSFIDDLE）

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return (
      <Style>
      {`
        .flex-container {
          padding: 0;
          margin: 0;
          list-style: none;

          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;

          -webkit-flex-flow: row wrap;
          justify-content: space-around;
       }

       .flex-item {
          background: tomato;
          padding: 5px;
          width: 200px;
          height: 150px;
          margin-top: 10px;

          line-height: 150px;
          color: white;
          font-weight: bold;
          font-size: 3em;
          text-align: center;
        }
      `}

      <ul class="flex-container">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
        <li class="flex-item">4</li>
        <li class="flex-item">5</li>
        <li class="flex-item">6</li>
      </ul>
    </Style>
  }
}

export default Intro;

HTML / CSS取自Chris Coyier的A Complete Guide to Flexbox帖子。

如何将回退样式属性应用于React JS组件？

2 个答案: