Bug: aspectRatio not being applied via style

[mattgperry]

React version: 16.14.0, 17.0.2

Steps To Reproduce

1. Apply aspectRatio via style - no aspectRatio applied
2. Add via className - aspectRatio applied

Needs Chrome 79 or above:
Link to code example: https://codesandbox.io/s/react-bug-not-applying-aspect-ratio-via-style-w2pqh?file=/src/App.js

The current behavior

No aspectRatio rule applied:
https://codesandbox.io/s/react-bug-not-applying-aspect-ratio-via-style-w2pqh?file=/src/App.js

The expected behavior

aspectRatio applied, here I'm adding it via a useLayoutEffect:
https://codesandbox.io/s/currying-hill-i09qn?file=/src/App.js

[adyz]

Yes, I have the same issue with another style property
Basically I want to add font-feature-settings: "tnum" or fontFeatureSettings and it gets removed.

https://codesandbox.io/s/custom-css-why-no-work-66ve2

[sebmarkbage]

Try passing a string instead of number. React special cases numbers (to add the "px" suffix) and only doesn't for certain known attributes. So new ones sometimes need to be added to this list if they shouldn't get a px suffix (most should): https://github.com/facebook/react/blob/master/packages/react-dom/src/shared/CSSProperty.js#L11

[sebmarkbage]

@adyz Your issue is unrelated. Would you mind opening a separate issue for that thread?

Basically try fontFeatureSettings: '"tnum"' instead. I.e. double strings. It's confusing but CSS expects a JS string of a CSS string. This is similar to how you have to do background: 'url("...")' in React but it's a little clearer there because it's a url(...) wrapper around it.

[mattgperry]

Thanks @sebmarkbage

[gaearon]

#21100

[gaearon]

@mattgperry how soon do you need this? Are you blocked?

[mattgperry]

@gaearon no, no rush at all! Just something I stumbled upon. Thanks for the lightning-quick response though!