fix(react inline styles): Fix React inline styles issue (T1289861) (DevExpress#29821)

Author: ajivanyandev

packages/devextreme-react/src/core/__tests__/component.test.tsx

@@ -312,6 +312,30 @@ describe('element attrs management', () => {
     expect(element.style.color).toEqual('red');
   });
 
+  it('element inline styles that should convert to px in strict mode (T1289861)', () => {
+    const { container } = testingLib.render(
+        <React.StrictMode>
+          <TestComponent style={{ maxWidth: 300 }} />
+        </React.StrictMode>,
+    );
+
+    const element: HTMLElement = container?.firstChild as HTMLElement;
+
+    expect(element.style.maxWidth).toEqual('300px');
+  });
+
+  it('element inline styles that should not convert to px in strict mode (T1289861)', () => {
+    const { container } = testingLib.render(
+        <React.StrictMode>
+          <TestComponent style={{ zIndex: 1000 }} />
+        </React.StrictMode>,
+    );
+
+    const element: HTMLElement = container?.firstChild as HTMLElement;
+
+    expect(element.style.zIndex).toEqual('1000');
+  });
+
   it('updates id, className and style', () => {
     const { container, rerender } = testingLib.render(
       <TestComponent id="id1" className="class1" style={{ background: 'red' }} />,

packages/devextreme-react/src/core/component-base.tsx

@@ -33,6 +33,7 @@ import {
   RestoreTreeContext,
   TemplateRenderingContext,
 } from './contexts';
+import { UNITLESS_NUMBERS_SET } from './const';
 
 const DX_REMOVE_EVENT = 'dxremove';
 
@@ -159,7 +160,11 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
 
         Object.entries(styles).forEach(
           ([name, value]) => {
-            el.style[name] = value;
+            if (typeof value === 'number' && !UNITLESS_NUMBERS_SET.has(name)) {
+              el.style[name] = `${value}px`;
+            } else {
+              el.style[name] = value;
+            }
           },
         );
       }

packages/devextreme-react/src/core/const.ts

@@ -0,0 +1,73 @@
+export const UNITLESS_NUMBERS_SET = new Set([
+  'animationIterationCount',
+  'aspectRatio',
+  'borderImageOutset',
+  'borderImageSlice',
+  'borderImageWidth',
+  'boxFlex',
+  'boxFlexGroup',
+  'boxOrdinalGroup',
+  'columnCount',
+  'columns',
+  'flex',
+  'flexGrow',
+  'flexPositive',
+  'flexShrink',
+  'flexNegative',
+  'flexOrder',
+  'gridArea',
+  'gridRow',
+  'gridRowEnd',
+  'gridRowSpan',
+  'gridRowStart',
+  'gridColumn',
+  'gridColumnEnd',
+  'gridColumnSpan',
+  'gridColumnStart',
+  'fontWeight',
+  'lineClamp',
+  'lineHeight',
+  'opacity',
+  'order',
+  'orphans',
+  'scale',
+  'tabSize',
+  'widows',
+  'zIndex',
+  'zoom',
+  'fillOpacity',
+  'floodOpacity',
+  'stopOpacity',
+  'strokeDasharray',
+  'strokeDashoffset',
+  'strokeMiterlimit',
+  'strokeOpacity',
+  'strokeWidth',
+  'MozAnimationIterationCount',
+  'MozBoxFlex',
+  'MozBoxFlexGroup',
+  'MozLineClamp',
+  'msAnimationIterationCount',
+  'msFlex',
+  'msZoom',
+  'msFlexGrow',
+  'msFlexNegative',
+  'msFlexOrder',
+  'msFlexPositive',
+  'msFlexShrink',
+  'msGridColumn',
+  'msGridColumnSpan',
+  'msGridRow',
+  'msGridRowSpan',
+  'WebkitAnimationIterationCount',
+  'WebkitBoxFlex',
+  'WebKitBoxFlexGroup',
+  'WebkitBoxOrdinalGroup',
+  'WebkitColumnCount',
+  'WebkitColumns',
+  'WebkitFlex',
+  'WebkitFlexGrow',
+  'WebkitFlexPositive',
+  'WebkitFlexShrink',
+  'WebkitLineClamp',
+]);