在将连字符写为 ReactJS 中的样式对象时处理 CSS 样式中的连字符答案

【问题标题】：Dealing with hyphens in css-style when writing them as style objects in ReactJS在将连字符写为 ReactJS 中的样式对象时处理 CSS 样式中的连字符
【发布时间】：2018-01-17 19:56:59
【问题描述】：

我有一个这样的css样式：

.AdvancedSearchGrid {
    width: 70%; 
    margin: auto;
    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;
}

我似乎无法找到一种方法来编写以连字符开头的部分，即（-webkit-flex、-moz-box、-ms-flexbox、-webkit-flex）以它们应该编写的格式在 JSX 中，我们应该使用 CamelCase。例如

list-style: none 将是 listStyle: 'none',

但是我应该如何以 JSX 方式输入我提到的那些行？

我什至不知道该怎么称呼它们，所以很难用谷歌搜索它。

【问题讨论】：

标签： javascript css reactjs flexbox

【解决方案1】：

这里有两个不同的问题：

1- 对于-webkit-flex-flow: row wrap;，您可以简单地使用WebkitFlexFlow: 'row wrap'，如docs 中所述

2-对于

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

您可能必须使用库，因为 React 不支持自动前缀：

看看这个answer

【讨论】：