diff --git a/components/lib/orderlist/OrderList.css b/components/lib/orderlist/OrderList.css
deleted file mode 100644
index d7037eab7d..0000000000
--- a/components/lib/orderlist/OrderList.css
+++ /dev/null
@@ -1,59 +0,0 @@
-.p-orderlist {
-    display: flex;
-}
-
-.p-orderlist-controls {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-.p-orderlist-list-container {
-    flex: 1 1 auto;
-}
-
-.p-orderlist-list {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    overflow: auto;
-    min-height: 12rem;
-    max-height: 24rem;
-}
-
-.p-orderlist-item {
-    cursor: pointer;
-    overflow: hidden;
-    position: relative;
-}
-
-.p-orderlist-filter {
-    position: relative;
-}
-
-.p-orderlist-filter-icon {
-    position: absolute;
-    top: 50%;
-    margin-top: -.5rem;
-}
-
-.p-orderlist-filter-input {
-    width: 100%;
-}
-
-.p-orderlist.p-state-disabled .p-orderlist-item,
-.p-orderlist.p-state-disabled .p-button {
-    cursor: default;
-}
-
-.p-orderlist.p-state-disabled .p-orderlist-list {
-    overflow: hidden;
-}
-
-.p-orderlist .p-orderlist-droppoint {
-    height: 0.5rem;
-}
-
-.p-orderlist .p-orderlist-droppoint.p-orderlist-droppoint-highlight {
-    background: var(--primary-color);
-}
diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js
index 833c463dfd..345427401e 100644
--- a/components/lib/orderlist/OrderList.js
+++ b/components/lib/orderlist/OrderList.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import PrimeReact, { FilterService } from '../api/Api';
-import { PrimeReactContext } from '../api/Api';
+import PrimeReact, { FilterService, PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { DomHandler, ObjectUtils, UniqueComponentId, classNames, mergeProps } from '../utils/Utils';
 import { OrderListBase } from './OrderListBase';
@@ -20,7 +20,7 @@ export const OrderList = React.memo(
         const styleElementRef = React.useRef(null);
         const reorderDirection = React.useRef(null);
 
-        const { ptm } = OrderListBase.setMetaData({
+        const { ptm, cx, isUnstyled } = OrderListBase.setMetaData({
             props,
             state: {
                 selection: selectionState,
@@ -29,6 +29,8 @@ export const OrderList = React.memo(
             }
         });
 
+        useHandleStyle(OrderListBase.css.styles, isUnstyled, { name: 'orderlist' });
+
         const onItemClick = (event) => {
             const metaKey = event.originalEvent.metaKey || event.originalEvent.ctrlKey;
             const index = ObjectUtils.findIndexInList(event.value, selectionState, props.dataKey);
@@ -228,14 +230,13 @@ export const OrderList = React.memo(
             }
         });
 
-        const className = classNames('p-orderlist p-component', props.className);
         const visibleList = getVisibleList();
 
         const rootProps = mergeProps(
             {
                 ref: elementRef,
                 id: props.id,
-                className,
+                className: classNames(props.className, cx('root')),
                 style: props.style
             },
             OrderListBase.getOtherProps(props),
@@ -254,6 +255,8 @@ export const OrderList = React.memo(
                     moveDownIcon={props.moveDownIcon}
                     moveBottomIcon={props.moveBottomIcon}
                     ptm={ptm}
+                    cx={cx}
+                    unstyled={props.unstyled}
                 />
                 <OrderListSubList
                     value={visibleList}
@@ -274,6 +277,7 @@ export const OrderList = React.memo(
                     tabIndex={props.tabIndex}
                     filterIcon={props.filterIcon}
                     ptm={ptm}
+                    cx={cx}
                 />
             </div>
         );
diff --git a/components/lib/orderlist/OrderListBase.js b/components/lib/orderlist/OrderListBase.js
index e58b34d16b..802ac147ea 100644
--- a/components/lib/orderlist/OrderListBase.js
+++ b/components/lib/orderlist/OrderListBase.js
@@ -1,4 +1,82 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: 'p-orderlist p-component',
+    control: 'p-orderlist-controls',
+    droppoint: 'p-orderlist-droppoint',
+    header: 'p-orderlist-header',
+    list: 'p-orderlist-list',
+    icon: 'p-orderlist-filter',
+    filter: 'p-orderlist-filter',
+    filterInput: 'p-orderlist-filter-input p-inputtext p-component',
+    filterIcon: 'p-orderlist-filter-icon',
+    filterContainer: 'p-orderlist-filter-container',
+    container: 'p-orderlist-list-container',
+    item: ({ item, isSelected }) => classNames('p-orderlist-item', { 'p-highlight': isSelected(item) })
+};
+
+const styles = `
+.p-orderlist {
+    display: flex;
+}
+
+.p-orderlist-controls {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.p-orderlist-list-container {
+    flex: 1 1 auto;
+}
+
+.p-orderlist-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: auto;
+    min-height: 12rem;
+    max-height: 24rem;
+}
+
+.p-orderlist-item {
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-orderlist-filter {
+    position: relative;
+}
+
+.p-orderlist-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+}
+
+.p-orderlist-filter-input {
+    width: 100%;
+}
+
+.p-orderlist.p-state-disabled .p-orderlist-item,
+.p-orderlist.p-state-disabled .p-button {
+    cursor: default;
+}
+
+.p-orderlist.p-state-disabled .p-orderlist-list {
+    overflow: hidden;
+}
+
+.p-orderlist .p-orderlist-droppoint {
+    height: 0.5rem;
+}
+
+.p-orderlist .p-orderlist-droppoint.p-orderlist-droppoint-highlight {
+    background: var(--primary-color);
+}
+`;
 
 export const OrderListBase = ComponentBase.extend({
     defaultProps: {
@@ -28,5 +106,9 @@ export const OrderListBase = ComponentBase.extend({
         filterTemplate: null,
         onFilter: null,
         children: undefined
+    },
+    css: {
+        classes,
+        styles
     }
 });
diff --git a/components/lib/orderlist/OrderListControls.js b/components/lib/orderlist/OrderListControls.js
index 99073dc529..f9d1e471be 100644
--- a/components/lib/orderlist/OrderListControls.js
+++ b/components/lib/orderlist/OrderListControls.js
@@ -12,6 +12,7 @@ export const OrderListControls = React.memo((props) => {
     const moveTopIcon = props.moveTopIcon || <AngleDoubleUpIcon />;
     const moveDownIcon = props.moveDownIcon || <AngleDownIcon />;
     const moveBottomIcon = props.moveBottomIcon || <AngleDoubleDownIcon />;
+    const { ptm, cx, unstyled } = props;
 
     const moveUp = (event) => {
         if (props.selection) {
@@ -127,49 +128,53 @@ export const OrderListControls = React.memo((props) => {
 
     const controlProps = mergeProps(
         {
-            className: 'p-orderlist-controls'
+            className: cx('control')
         },
-        props.ptm('control')
+        ptm('control')
     );
 
     const moveUpButtonProps = mergeProps(
         {
             type: 'button',
+            unstyled: unstyled,
             icon: moveUpIcon,
             onClick: moveUp,
             'aria-label': ariaLabel('moveUp')
         },
-        props.ptm('moveUpButton')
+        ptm('moveUpButton')
     );
 
     const moveTopButtonProps = mergeProps(
         {
             type: 'button',
+            unstyled: unstyled,
             icon: moveTopIcon,
             onClick: moveTop,
             'aria-label': ariaLabel('moveTop')
         },
-        props.ptm('moveTopButton')
+        ptm('moveTopButton')
     );
 
     const moveDownButtonProps = mergeProps(
         {
             type: 'button',
+            unstyled: unstyled,
             icon: moveDownIcon,
             onClick: moveDown,
             'aria-label': ariaLabel('moveDown')
         },
-        props.ptm('moveDownButton')
+        ptm('moveDownButton')
     );
 
     const moveBottomButtonProps = mergeProps(
         {
             type: 'button',
+            unstyled: unstyled,
             icon: moveBottomIcon,
             onClick: moveBottom,
             'aria-label': ariaLabel('moveBottom')
         },
-        props.ptm('moveBottomButton')
+        ptm('moveBottomButton')
     );
 
     return (
diff --git a/components/lib/orderlist/OrderListSubList.js b/components/lib/orderlist/OrderListSubList.js
index e56311f28f..6db2562930 100644
--- a/components/lib/orderlist/OrderListSubList.js
+++ b/components/lib/orderlist/OrderListSubList.js
@@ -4,8 +4,10 @@ import { Ripple } from '../ripple/Ripple';
 import { classNames, DomHandler, IconUtils, mergeProps, ObjectUtils } from '../utils/Utils';
 
 export const OrderListSubList = React.memo((props) => {
+    const { ptm, cx } = props;
+
     const getPTOptions = (item, key) => {
-        return props.ptm(key, {
+        return ptm(key, {
             context: {
                 selected: isSelected(item)
             }
@@ -88,12 +90,12 @@ export const OrderListSubList = React.memo((props) => {
     const createDropPoint = (index, key) => {
         const droppointProps = mergeProps(
             {
-                className: 'p-orderlist-droppoint',
+                className: cx('droppoint'),
                 onDragOver: (e) => onDragOver(e, index + 1),
                 onDragLeave: onDragLeave,
                 onDrop: onDrop
             },
-            props.ptm('droppoint')
+            ptm('droppoint')
         );
 
         return <li key={key} {...droppointProps}></li>;
@@ -102,9 +104,9 @@ export const OrderListSubList = React.memo((props) => {
     const createHeader = () => {
         const headerProps = mergeProps(
             {
-                className: 'p-orderlist-header'
+                className: cx('header')
             },
-            props.ptm('header')
+            ptm('header')
         );
 
         return props.header ? <div {...headerProps}>{props.header}</div> : null;
@@ -114,12 +116,11 @@ export const OrderListSubList = React.memo((props) => {
         if (props.value) {
             return props.value.map((item, i) => {
                 const content = props.itemTemplate ? props.itemTemplate(item) : item;
-                const itemClassName = classNames('p-orderlist-item', { 'p-highlight': isSelected(item) }, props.className);
                 const key = JSON.stringify(item);
 
                 const itemProps = mergeProps(
                     {
-                        className: itemClassName,
+                        className: classNames(props.className, cx('item', { item, isSelected })),
                         onClick: (e) => props.onItemClick({ originalEvent: e, value: item, index: i }),
                         onKeyDown: (e) => props.onItemKeyDown({ originalEvent: e, value: item, index: i }),
                         role: 'option',
@@ -152,7 +153,7 @@ export const OrderListSubList = React.memo((props) => {
                 } else {
                     const itemProps = mergeProps(
                         {
-                            className: itemClassName,
+                            className: classNames(props.className, cx('item', { item, isSelected })),
                             onClick: (e) => props.onItemClick({ originalEvent: e, value: item, index: i }),
                             onKeyDown: (e) => props.onItemKeyDown({ originalEvent: e, value: item, index: i }),
                             role: 'option',
@@ -179,25 +180,24 @@ export const OrderListSubList = React.memo((props) => {
         const listProps = mergeProps(
             {
                 ref: listElementRef,
-                className: 'p-orderlist-list',
+                className: cx('list'),
                 style: props.listStyle,
                 onDragOver: onListMouseMove,
                 role: 'listbox',
                 'aria-multiselectable': true
             },
-            props.ptm('list')
+            ptm('list')
         );
 
         return <ul {...listProps}>{items}</ul>;
     };
 
     const createFilter = () => {
-        const iconClassName = 'p-orderlist-filter';
         const searchIconProps = mergeProps(
             {
-                className: iconClassName
+                className: cx('icon')
             },
-            props.ptm('icon')
+            ptm('icon')
         );
         const icon = props.filterIcon || <SearchIcon {...searchIconProps} />;
         const filterIcon = IconUtils.getJSXIcon(icon, { ...searchIconProps }, { props });
@@ -205,9 +205,9 @@ export const OrderListSubList = React.memo((props) => {
         if (props.filter) {
             const filterProps = mergeProps(
                 {
-                    className: 'p-orderlist-filter'
+                    className: cx('filter')
                 },
-                props.ptm('filter')
+                ptm('filter')
             );
 
             const filterInputProps = mergeProps(
@@ -217,16 +217,16 @@ export const OrderListSubList = React.memo((props) => {
                     onChange: props.onFilter,
                     onKeyDown: onFilterInputKeyDown,
                     placeholder: props.placeholder,
-                    className: 'p-orderlist-filter-input p-inputtext p-component'
+                    className: cx('filterInput')
                 },
-                props.ptm('filterInput')
+                ptm('filterInput')
             );
 
             const filterIconProps = mergeProps(
                 {
-                    className: 'p-orderlist-filter-icon'
+                    className: cx('filterIcon')
                 },
-                props.ptm('filterIcon')
+                ptm('filterIcon')
             );
 
             let content = (
@@ -255,9 +255,9 @@ export const OrderListSubList = React.memo((props) => {
 
             const filterContainerProps = mergeProps(
                 {
-                    className: 'p-orderlist-filter-container'
+                    className: cx('filterContainer')
                 },
-                props.ptm('filterContainer')
+                ptm('filterContainer')
             );
 
             return <div {...filterContainerProps}>{content}</div>;
@@ -272,9 +272,9 @@ export const OrderListSubList = React.memo((props) => {
 
     const containerProps = mergeProps(
         {
-            className: 'p-orderlist-list-container'
+            className: cx('container')
         },
-        props.ptm('container')
+        ptm('container')
     );
 
     return (
diff --git a/components/lib/orderlist/orderlist.d.ts b/components/lib/orderlist/orderlist.d.ts
index e379b0632c..7b077b59a6 100755
--- a/components/lib/orderlist/orderlist.d.ts
+++ b/components/lib/orderlist/orderlist.d.ts
@@ -250,6 +250,11 @@ export interface OrderListProps extends Omit<React.DetailedHTMLProps<React.HTMLA
      * @type {OrderListPassThroughOptions}
      */
     pt?: OrderListPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**
diff --git a/styles/primereact.css b/styles/primereact.css
index 9ab99db723..9c5f91a12d 100644
--- a/styles/primereact.css
+++ b/styles/primereact.css
@@ -4,7 +4,6 @@
 @import "../components/lib/datatable/DataTable.css";
 @import "../components/lib/toast/Toast.css";
 @import "../components/lib/messages/Messages.css";
-@import "../components/lib/orderlist/OrderList.css";
 @import "../components/lib/organizationchart/OrganizationChart.css";
 @import "../components/lib/picklist/PickList.css";
 @import "../components/lib/tooltip/Tooltip.css";