Material-ui: [good practice] - What's the default style units? What the good practice?

[Pierre-CLIND]

What's the default style units?

Example:

height: 16

vs

height: 16px

What the good practice?

For example, in styled-components, units are mandatory since 5.0.0

Source :

https://github.com/styled-components/styled-components/releases/tag/v5.0.0

Update css-to-react-native to v3.0.0 (#2811); the one breaking change noted is that unitless line height is no longer allowed when setting font properties

if you get a lot of warnings at dev time from not having units in your styles, this codemod is available to help expedite updates: https://github.com/styled-components/styled-components-native-code-mod

[oliviertassinari]

The unit should be identical between JSS, emotion, and styled-components. The change in v5 of sc is specific to line-height and that's because using a unit less line height has some interesting capabilities. Read https://css-tricks.com/almanac/properties/l/line-height/ for more details. If you are interested of where the unit come in v4 with JSS see https://github.com/cssinjs/jss/blob/master/packages/jss-plugin-default-unit/src/defaultUnits.js.

[oliviertassinari]

What the good practice?

You can look at our source for that. As of now, we rely on the default units when possible, which is pixels. We are discussing changing it in #21030.

[Pierre-CLIND]

Thanks a lot for your answer.

FYI, with styled-components v5 in React-Native v0.63 for example, all units are _mandatory_ (warnings otherwise).