React inlines style not working with some attributes

Question

I supposed that react parameter gridRowStart will be translated to grid-row-start, same as zIndex is translated to z-index. But it does not work, do you have any idea why?

My render method:

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

unfortunately in chrome i the element has only 2 attributes

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

What's more, I've tried to use attibutes from React doc https://facebook.github.io/react/tips/style-props-value-px.html unfortunately not all attributes are visible:

RENDERED ATTRIBUTES:

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

NOT RENDERED:

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

Other attributes like 'example' or 'whatever' attribute are omitted as well.

What browser are you using?

joews
– joews

2016-10-15 20:24:35 +00:00
Commented Oct 15, 2016 at 20:24 — joews
– joews, Commented Oct 15, 2016 at 20:24
i'm using Google chrome

tochur
– tochur

2016-10-15 20:28:55 +00:00
Commented Oct 15, 2016 at 20:28 — tochur
– tochur, Commented Oct 15, 2016 at 20:28
Having issue with lineClamp.

ArtixZ
– ArtixZ

2020-05-14 16:34:35 +00:00
Commented May 14, 2020 at 16:34 — ArtixZ
– ArtixZ, Commented May 14, 2020 at 16:34

Steffen · Accepted Answer · 2016-10-15 21:13:19Z

1

The problem here is that you are probably using these CSS props in a way that your browser ignores them. Check out this simple example:

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

It has a valid gridRowStart set and if you inspect the rendered element you will see that grid-row-start style is set as expected.

answered Oct 15, 2016 at 21:13

Steffen

3,5562 gold badges30 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

joews Over a year ago

This is the right answer, having re-read the grid-row-start spec. I was fooled by Chrome accepting 1 as a valid value.

tochur Over a year ago

Thanks for your answer, you saved a lot of my time :)

joews · Accepted Answer · 2016-10-15 21:19:16Z

React converts most unitless numeric CSS values into pixels. So, for example, { paddingLeft: 10 } becomes { paddingLeft: '10px' }.

It has a list of CSS properties which accept numbers but are not in units of "px".. Properties on this list are treated as plain numbers.

gridRowStart isn't on this list, so React transforms the value into { gridRowStart: 1px }. That isn't a valid value, so the div's style property is not updated.

gridRow is on the unitless list, so the style is updated correctly:

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>

Note: you'll need to enable "Experimental Web Platform Technologies" in Chrome's about://flags to use grid layout.

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

Collectives™ on Stack Overflow

React inlines style not working with some attributes

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related