diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js
index bc836c3199..db845ec77a 100644
--- a/components/lib/breadcrumb/BreadCrumb.js
+++ b/components/lib/breadcrumb/BreadCrumb.js
@@ -3,7 +3,7 @@ import { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMergeProps, useMountEffect } from '../hooks/Hooks';
 import { ChevronRightIcon } from '../icons/chevronright';
-import { IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils';
+import { IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
 import { BreadCrumbBase } from './BreadCrumbBase';
 
 export const BreadCrumb = React.memo(
@@ -243,7 +243,7 @@ export const BreadCrumb = React.memo(
             {
                 id: props.id,
                 ref: elementRef,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 style: props.style
             },
             BreadCrumbBase.getOtherProps(props),
diff --git a/components/lib/breadcrumb/BreadCrumbBase.js b/components/lib/breadcrumb/BreadCrumbBase.js
index 70f0b0ce31..4193c44914 100644
--- a/components/lib/breadcrumb/BreadCrumbBase.js
+++ b/components/lib/breadcrumb/BreadCrumbBase.js
@@ -10,7 +10,7 @@ const classes = {
     separator: 'p-menuitem-separator',
     menuitem: ({ item }) => classNames('p-menuitem', item.className, { 'p-disabled': item.disabled }),
     menu: 'p-breadcrumb-list',
-    root: ({ props }) => classNames('p-breadcrumb p-component', props.className)
+    root: 'p-breadcrumb p-component'
 };
 
 const styles = `
diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js
index 5507a5f463..b9ff158bae 100644
--- a/components/lib/panelmenu/PanelMenu.js
+++ b/components/lib/panelmenu/PanelMenu.js
@@ -429,7 +429,7 @@ export const PanelMenu = React.memo(
         const rootProps = mergeProps(
             {
                 ref: elementRef,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 id: props.id,
                 style: props.style
             },
diff --git a/components/lib/panelmenu/PanelMenuBase.js b/components/lib/panelmenu/PanelMenuBase.js
index 25f5e5d08c..4ea25c7ecb 100644
--- a/components/lib/panelmenu/PanelMenuBase.js
+++ b/components/lib/panelmenu/PanelMenuBase.js
@@ -10,7 +10,7 @@ const classes = {
     header: ({ active, item }) => classNames('p-component p-panelmenu-header', { 'p-highlight': active && !!item.items, 'p-disabled': item.disabled }),
     headerContent: 'p-panelmenu-header-content',
     menuContent: 'p-panelmenu-content',
-    root: ({ props }) => classNames('p-panelmenu p-component', props.className),
+    root: 'p-panelmenu p-component',
     separator: 'p-menuitem-separator',
     toggleableContent: ({ active }) =>
         classNames('p-toggleable-content', {
diff --git a/components/lib/steps/Steps.js b/components/lib/steps/Steps.js
index d9c64d538b..c0ca977276 100644
--- a/components/lib/steps/Steps.js
+++ b/components/lib/steps/Steps.js
@@ -282,7 +282,7 @@ export const Steps = React.memo(
             {
                 id: props.id,
                 ref: elementRef,
-                className: cx('root'),
+                className: classNames(props.className, cx('root')),
                 style: props.style
             },
             StepsBase.getOtherProps(props),
diff --git a/components/lib/steps/StepsBase.js b/components/lib/steps/StepsBase.js
index dfa09583a7..f3dd6f1bac 100644
--- a/components/lib/steps/StepsBase.js
+++ b/components/lib/steps/StepsBase.js
@@ -12,13 +12,9 @@ const classes = {
             'p-disabled': disabled
         }),
     root: ({ props }) =>
-        classNames(
-            'p-steps p-component',
-            {
-                'p-readonly': props.readOnly
-            },
-            props.className
-        )
+        classNames('p-steps p-component', {
+            'p-readonly': props.readOnly
+        })
 };
 
 const styles = `
diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js
index 9a1af9a82f..778b6ce57d 100644
--- a/components/lib/tabmenu/TabMenu.js
+++ b/components/lib/tabmenu/TabMenu.js
@@ -329,7 +329,7 @@ export const TabMenu = React.memo(
                 {
                     id: props.id,
                     ref: elementRef,
-                    className: cx('root'),
+                    className: classNames(props.className, cx('root')),
                     style: props.style
                 },
                 TabMenuBase.getOtherProps(props),
diff --git a/components/lib/tabmenu/TabMenuBase.js b/components/lib/tabmenu/TabMenuBase.js
index e07f058bdb..19585bc5d7 100644
--- a/components/lib/tabmenu/TabMenuBase.js
+++ b/components/lib/tabmenu/TabMenuBase.js
@@ -16,7 +16,7 @@ const classes = {
         ),
     inkbar: 'p-tabmenu-ink-bar',
     menu: 'p-tabmenu-nav p-reset',
-    root: ({ props }) => classNames('p-tabmenu p-component', props.className)
+    root: 'p-tabmenu p-component'
 };
 
 const styles = `
diff --git a/components/lib/tieredmenu/TieredMenu.js b/components/lib/tieredmenu/TieredMenu.js
index 81b086c797..9c65acad12 100644
--- a/components/lib/tieredmenu/TieredMenu.js
+++ b/components/lib/tieredmenu/TieredMenu.js
@@ -5,7 +5,7 @@ import { CSSTransition } from '../csstransition/CSSTransition';
 import { useEventListener, useMatchMedia, useMergeProps, useMountEffect, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
-import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
+import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
 import { TieredMenuBase } from './TieredMenuBase';
 import { TieredMenuSub } from './TieredMenuSub';
 
@@ -682,7 +682,7 @@ export const TieredMenu = React.memo(
                 {
                     ref: containerRef,
                     id: props.id,
-                    className: cx('root'),
+                    className: classNames(props.className, cx('root')),
                     style: props.style,
                     onClick: onPanelClick
                 },
diff --git a/components/lib/tieredmenu/TieredMenuBase.js b/components/lib/tieredmenu/TieredMenuBase.js
index 0084886dbd..0966c3e009 100644
--- a/components/lib/tieredmenu/TieredMenuBase.js
+++ b/components/lib/tieredmenu/TieredMenuBase.js
@@ -4,15 +4,11 @@ import { classNames } from '../utils/Utils';
 
 const classes = {
     root: ({ props, context }) =>
-        classNames(
-            'p-tieredmenu p-component',
-            {
-                'p-tieredmenu-overlay': props.popup,
-                'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
-                'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
-            },
-            props.className
-        ),
+        classNames('p-tieredmenu p-component', {
+            'p-tieredmenu-overlay': props.popup,
+            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        }),
     separator: 'p-menuitem-separator',
     icon: ({ _icon }) => classNames('p-menuitem-icon', _icon),
     content: 'p-menuitem-content',