React 内联样式不适用于某些属性

Question

我假设反应参数 gridRowStart 将被转换为 grid-row-start，就像 zIndex 被转换为 z-index 一样。但它不起作用，你知道为什么吗？

我的渲染方法：

render() {
var divStyle = {
      background: '#92f442',
      gridRowStart: 1,
      zIndex: 2
};
return (
      <div style={divStyle}>
      </div>
)};

不幸的是，在 chrome 中，我的元素只有 2 个属性

<div style="background: rgb(146, 244, 66); z-index: 2;"></div>

此外，我尝试使用 React 文档中的属性 https://facebook.github.io/react/tips/style-props-value-px.html 不幸的是，并非所有属性都可见：

渲染属性：

columnCount、fillOpacity、flex、stopOpacity、strokeDashoffset、strokeOpacity、strokeWidth、tabSize、widows、zIndex、zoom、lineHeight、opacity、columnCount、fillOpacity、flex、animationIterationCount

未呈现：

columnCount、boxFlex、boxFlexGroup、boxOrdinalGroup、flexGrow、flexPositive、flexShrink、flexNegative、flexOrder、fontWeight、lineClamp、order、orphans

其他属性，如 'example' 或 'whatever' 属性也被省略。

Answer 1

反应 converts most unitless numeric CSS values into pixels。因此，例如，{ paddingLeft: 10 } 变为 { paddingLeft: '10px' }。

它有一个 list of CSS properties which accept numbers but are not in units of "px".。此列表中的属性被视为纯数字。

gridRowStart 不在此列表中，因此 React 将值转换为 { gridRowStart: 1px }。那不是 valid value，所以 div 的 style 属性没有更新。

gridRow 在 unitless 列表中，因此样式已正确更新：

const Test = () => {
  var divStyle = {
    backgroundColor: "yellow",
    gridRow: 1
  };

  return <div style={divStyle}>React</div>;
}

// renders:
// <div style="background-color: yellow; grid-row: 1 auto;">React</div>

注意：您需要在Chrome的about://flags中启用"Experimental Web Platform Technologies"才能使用网格布局。

https://jsfiddle.net/wysj7jx1/5/

Answer 2

这里的问题是您可能以浏览器忽略它们的方式使用这些 CSS 道具。看看这个简单的例子：

<div style={{ display: 'grid', height: 200, gridTemplate: '200px / repeat(4, 1fr)' }}>
  <div style={{ background: 'lime', gridRowStart: 'span 2', zIndex: 2   }}>Hello {this.props.name}</div>
  <div style={{ background: 'yellow' }}></div>
  <div style={{ background: 'blue' }}></div>
</div>

https://jsfiddle.net/LsL6yn7k/

它有一个有效的 gridRowStart 集，如果您检查呈现的元素，您会看到 grid-row-start 样式设置如预期。

React 内联样式不适用于某些属性

React inlines style not working with some attributes

javascript

css

jsx

reactjs