diff --git a/packages/react/src/components/Loading/Loading.js b/packages/react/src/components/Loading/Loading.js
index 23c235cc8da5..ee92bfdf1899 100644
--- a/packages/react/src/components/Loading/Loading.js
+++ b/packages/react/src/components/Loading/Loading.js
@@ -5,13 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { settings } from 'carbon-components';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import { usePrefix } from '../../internal/usePrefix';
 
-const { prefix } = settings;
 const getInstanceId = setupGetInstanceId();
 
 function Loading({
@@ -23,6 +22,7 @@ function Loading({
   description,
   ...rest
 }) {
+  const prefix = usePrefix();
   const { current: instanceId } = useRef(getInstanceId());
   const loadingClassName = cx(customClassName, {
     [`${prefix}--loading`]: true,
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
index 5bd638468e26..392bc95476c3 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -6,7 +6,6 @@
  */
 
 import { WarningFilled16, WarningAltFilled16 } from '@carbon/icons-react';
-import { settings } from 'carbon-components';
 import cx from 'classnames';
 import Downshift, { useSelect } from 'downshift';
 import isEqual from 'lodash.isequal';
@@ -22,8 +21,8 @@ import { mapDownshiftProps } from '../../tools/createPropAdapter';
 import mergeRefs from '../../tools/mergeRefs';
 import { keys, match } from '../../internal/keyboard';
 import { useFeatureFlag } from '../FeatureFlags';
+import { usePrefix } from '../../internal/usePrefix';
 
-const { prefix } = settings;
 const noop = () => {};
 const getInstanceId = setupGetInstanceId();
 const {
@@ -71,6 +70,7 @@ const MultiSelect = React.forwardRef(function MultiSelect(
   },
   ref
 ) {
+  const prefix = usePrefix();
   const { current: multiSelectInstanceId } = useRef(getInstanceId());
   const [highlightedIndex, setHighlightedIndex] = useState(null);
   const [isOpen, setIsOpen] = useState(open);
diff --git a/packages/react/src/components/Notification/Notification.js b/packages/react/src/components/Notification/Notification.js
index d8d652b646cc..34264602723f 100644
--- a/packages/react/src/components/Notification/Notification.js
+++ b/packages/react/src/components/Notification/Notification.js
@@ -8,7 +8,6 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
 import cx from 'classnames';
-import { settings } from 'carbon-components';
 import {
   Close20,
   ErrorFilled20,
@@ -18,10 +17,8 @@ import {
   InformationFilled20,
   InformationSquareFilled20,
 } from '@carbon/icons-react';
-
 import Button from '../Button';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 export function NotificationActionButton({
   children,
@@ -29,6 +26,7 @@ export function NotificationActionButton({
   onClick,
   ...rest
 }) {
+  const prefix = usePrefix();
   const className = cx(
     customClassName,
     `${prefix}--inline-notification__action-button`
@@ -73,6 +71,7 @@ export function NotificationButton({
   notificationType,
   ...rest
 }) {
+  const prefix = usePrefix();
   const buttonClassName = cx(className, {
     [`${prefix}--${notificationType}-notification__close-button`]: notificationType,
   });
@@ -150,6 +149,7 @@ export function NotificationTextDetails({
   children,
   ...rest
 }) {
+  const prefix = usePrefix();
   if (notificationType === 'toast') {
     return (
       <div {...rest} className={`${prefix}--toast-notification__details`}>
@@ -218,6 +218,7 @@ const iconTypes = {
 };
 
 function NotificationIcon({ iconDescription, kind, notificationType }) {
+  const prefix = usePrefix();
   const IconForKind = iconTypes[kind];
   if (!IconForKind) {
     return null;
@@ -261,6 +262,7 @@ export function ToastNotification({
   timeout,
   ...rest
 }) {
+  const prefix = usePrefix();
   const [isOpen, setIsOpen] = useState(true);
   const containerClassName = cx(className, {
     [`${prefix}--toast-notification`]: true,
@@ -444,6 +446,7 @@ export function InlineNotification({
   children,
   ...rest
 }) {
+  const prefix = usePrefix();
   const [isOpen, setIsOpen] = useState(true);
   const containerClassName = cx(className, {
     [`${prefix}--inline-notification`]: true,
diff --git a/packages/react/src/components/OrderedList/OrderedList.js b/packages/react/src/components/OrderedList/OrderedList.js
index a3550d53d575..687be66c19fa 100644
--- a/packages/react/src/components/OrderedList/OrderedList.js
+++ b/packages/react/src/components/OrderedList/OrderedList.js
@@ -8,9 +8,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
-import { settings } from 'carbon-components';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const OrderedList = ({
   children,
@@ -20,6 +18,7 @@ const OrderedList = ({
   isExpressive,
   ...other
 }) => {
+  const prefix = usePrefix();
   const classNames = classnames(
     {
       [`${prefix}--list--ordered`]: !native,
diff --git a/packages/react/src/components/Select/Select.Skeleton.js b/packages/react/src/components/Select/Select.Skeleton.js
index f3e4b64b25fe..269c6b9caa37 100644
--- a/packages/react/src/components/Select/Select.Skeleton.js
+++ b/packages/react/src/components/Select/Select.Skeleton.js
@@ -8,18 +8,21 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
-import { settings } from 'carbon-components';
+import { usePrefix } from '../../internal/usePrefix';
 
-const { prefix } = settings;
-
-const SelectSkeleton = ({ hideLabel, className, ...rest }) => (
-  <div className={cx(`${prefix}--form-item`, className)} {...rest}>
-    {!hideLabel && <span className={`${prefix}--label ${prefix}--skeleton`} />}
-    <div className={`${prefix}--select ${prefix}--skeleton`}>
-      <div className={`${prefix}--select-input`} />
+const SelectSkeleton = ({ hideLabel, className, ...rest }) => {
+  const prefix = usePrefix();
+  return (
+    <div className={cx(`${prefix}--form-item`, className)} {...rest}>
+      {!hideLabel && (
+        <span className={`${prefix}--label ${prefix}--skeleton`} />
+      )}
+      <div className={`${prefix}--select ${prefix}--skeleton`}>
+        <div className={`${prefix}--select-input`} />
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 SelectSkeleton.propTypes = {
   /**
diff --git a/packages/react/src/components/Select/Select.js b/packages/react/src/components/Select/Select.js
index 2e26d01fedef..bf31c3ace004 100644
--- a/packages/react/src/components/Select/Select.js
+++ b/packages/react/src/components/Select/Select.js
@@ -8,7 +8,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-import { settings } from 'carbon-components';
 import {
   ChevronDown16,
   WarningFilled16,
@@ -16,8 +15,7 @@ import {
 } from '@carbon/icons-react';
 import deprecate from '../../prop-types/deprecate';
 import { useFeatureFlag } from '../FeatureFlags';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const Select = React.forwardRef(function Select(
   {
@@ -43,6 +41,7 @@ const Select = React.forwardRef(function Select(
   },
   ref
 ) {
+  const prefix = usePrefix();
   const enabled = useFeatureFlag('enable-v11-release');
 
   const selectClasses = classNames(
diff --git a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.js b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.js
index 85405db4ef1f..f727d76ff63e 100644
--- a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.js
+++ b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.js
@@ -8,11 +8,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { settings } from 'carbon-components';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const SkeletonPlaceholder = ({ className, ...other }) => {
+  const prefix = usePrefix();
   const skeletonPlaceholderClasses = classNames({
     [`${prefix}--skeleton__placeholder`]: true,
     [className]: className,
diff --git a/packages/react/src/components/SkeletonText/SkeletonText.js b/packages/react/src/components/SkeletonText/SkeletonText.js
index 16361338a956..64b600825a60 100644
--- a/packages/react/src/components/SkeletonText/SkeletonText.js
+++ b/packages/react/src/components/SkeletonText/SkeletonText.js
@@ -8,9 +8,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-import { settings } from 'carbon-components';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const randoms = [0.973051493507435, 0.15334737213558558, 0.5671034553053769];
 
@@ -26,6 +24,7 @@ const SkeletonText = ({
   className,
   ...other
 }) => {
+  const prefix = usePrefix();
   const skeletonTextClasses = classNames({
     [`${prefix}--skeleton__text`]: true,
     [`${prefix}--skeleton__heading`]: heading,
diff --git a/packages/react/src/components/StructuredList/StructuredList.Skeleton.js b/packages/react/src/components/StructuredList/StructuredList.Skeleton.js
index 5d17e9e11e07..f7a1fc9cc767 100644
--- a/packages/react/src/components/StructuredList/StructuredList.Skeleton.js
+++ b/packages/react/src/components/StructuredList/StructuredList.Skeleton.js
@@ -8,11 +8,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
-import { settings } from 'carbon-components';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const StructuredListSkeleton = ({ rowCount, border, className, ...rest }) => {
+  const prefix = usePrefix();
   const StructuredListSkeletonClasses = cx(className, {
     [`${prefix}--skeleton`]: true,
     [`${prefix}--structured-list`]: true,
diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
index 41148b3fb976..af9ec9e09050 100644
--- a/packages/react/src/components/StructuredList/StructuredList.js
+++ b/packages/react/src/components/StructuredList/StructuredList.js
@@ -8,11 +8,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { settings } from 'carbon-components';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import deprecate from '../../prop-types/deprecate';
+import { usePrefix } from '../../internal/usePrefix';
 
-const { prefix } = settings;
 const getInstanceId = setupGetInstanceId();
 
 export function StructuredListWrapper(props) {
@@ -26,6 +25,7 @@ export function StructuredListWrapper(props) {
     border: _border,
     ...other
   } = props;
+  const prefix = usePrefix();
   const classes = classNames(`${prefix}--structured-list`, className, {
     [`${prefix}--structured-list--selection`]: selection,
     [`${prefix}--structured-list--condensed`]: isCondensed,
@@ -88,6 +88,7 @@ StructuredListWrapper.defaultProps = {
 
 export function StructuredListHead(props) {
   const { children, className, ...other } = props;
+  const prefix = usePrefix();
   const classes = classNames(`${prefix}--structured-list-thead`, className);
 
   return (
@@ -111,6 +112,7 @@ StructuredListHead.propTypes = {
 
 export function StructuredListBody(props) {
   const { children, className, ...other } = props;
+  const prefix = usePrefix();
   const classes = classNames(`${prefix}--structured-list-tbody`, className);
 
   return (
@@ -153,6 +155,7 @@ export function StructuredListRow(props) {
     label,
     ...other
   } = props;
+  const prefix = usePrefix();
   const classes = classNames(`${prefix}--structured-list-row`, className, {
     [`${prefix}--structured-list-row--header-row`]: head,
   });
@@ -215,6 +218,7 @@ StructuredListRow.defaultProps = {
 
 export function StructuredListInput(props) {
   const { className, value, name, title, id, ...other } = props;
+  const prefix = usePrefix();
   const classes = classNames(`${prefix}--structured-list-input`, className);
   const instanceId = id || getInstanceId();
 
@@ -277,6 +281,7 @@ StructuredListInput.defaultProps = {
 
 export function StructuredListCell(props) {
   const { children, className, head, noWrap, ...other } = props;
+  const prefix = usePrefix();
   const classes = classNames(className, {
     [`${prefix}--structured-list-th`]: head,
     [`${prefix}--structured-list-td`]: !head,
diff --git a/packages/react/src/components/Tag/Tag.Skeleton.js b/packages/react/src/components/Tag/Tag.Skeleton.js
index f1fed69d89dd..e87a1a9954f7 100644
--- a/packages/react/src/components/Tag/Tag.Skeleton.js
+++ b/packages/react/src/components/Tag/Tag.Skeleton.js
@@ -8,11 +8,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
-import { settings } from 'carbon-components';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 function TagSkeleton({ className, size, ...rest }) {
+  const prefix = usePrefix();
   return (
     <span
       className={cx(`${prefix}--tag`, `${prefix}--skeleton`, className, {
diff --git a/packages/react/src/components/Tag/Tag.js b/packages/react/src/components/Tag/Tag.js
index 3ae8808100f0..a9bb8b5ff47e 100644
--- a/packages/react/src/components/Tag/Tag.js
+++ b/packages/react/src/components/Tag/Tag.js
@@ -8,11 +8,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-import { settings } from 'carbon-components';
 import { Close16 } from '@carbon/icons-react';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import { usePrefix } from '../../internal/usePrefix';
 
-const { prefix } = settings;
 const getInstanceId = setupGetInstanceId();
 const TYPES = {
   red: 'Red',
@@ -41,6 +40,7 @@ const Tag = ({
   size,
   ...other
 }) => {
+  const prefix = usePrefix();
   const tagId = id || `tag-${getInstanceId()}`;
   const tagClasses = classNames(`${prefix}--tag`, className, {
     [`${prefix}--tag--disabled`]: disabled,
diff --git a/packages/react/src/components/TextArea/TextArea.Skeleton.js b/packages/react/src/components/TextArea/TextArea.Skeleton.js
index 5a8f1eeb58f6..212fddd63ac9 100644
--- a/packages/react/src/components/TextArea/TextArea.Skeleton.js
+++ b/packages/react/src/components/TextArea/TextArea.Skeleton.js
@@ -8,16 +8,19 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
-import { settings } from 'carbon-components';
+import { usePrefix } from '../../internal/usePrefix';
 
-const { prefix } = settings;
-
-const TextAreaSkeleton = ({ hideLabel, className, ...rest }) => (
-  <div className={cx(`${prefix}--form-item`, className)} {...rest}>
-    {!hideLabel && <span className={`${prefix}--label ${prefix}--skeleton`} />}
-    <div className={`${prefix}--skeleton ${prefix}--text-area`} />
-  </div>
-);
+const TextAreaSkeleton = ({ hideLabel, className, ...rest }) => {
+  const prefix = usePrefix();
+  return (
+    <div className={cx(`${prefix}--form-item`, className)} {...rest}>
+      {!hideLabel && (
+        <span className={`${prefix}--label ${prefix}--skeleton`} />
+      )}
+      <div className={`${prefix}--skeleton ${prefix}--text-area`} />
+    </div>
+  );
+};
 
 TextAreaSkeleton.propTypes = {
   /**
diff --git a/packages/react/src/components/TextArea/TextArea.js b/packages/react/src/components/TextArea/TextArea.js
index 8b770c44c7e6..7382c174bbad 100644
--- a/packages/react/src/components/TextArea/TextArea.js
+++ b/packages/react/src/components/TextArea/TextArea.js
@@ -8,11 +8,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
-import { settings } from 'carbon-components';
 import { WarningFilled16 } from '@carbon/icons-react';
 import { useFeatureFlag } from '../FeatureFlags';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const TextArea = React.forwardRef(function TextArea(
   {
@@ -31,6 +29,7 @@ const TextArea = React.forwardRef(function TextArea(
   },
   ref
 ) {
+  const prefix = usePrefix();
   const enabled = useFeatureFlag('enable-v11-release');
 
   const textareaProps = {
diff --git a/packages/react/src/components/TooltipDefinition/TooltipDefinition.js b/packages/react/src/components/TooltipDefinition/TooltipDefinition.js
index b4bc18d01961..884cceb1ef53 100644
--- a/packages/react/src/components/TooltipDefinition/TooltipDefinition.js
+++ b/packages/react/src/components/TooltipDefinition/TooltipDefinition.js
@@ -8,13 +8,12 @@
 import cx from 'classnames';
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { settings } from 'carbon-components';
 import debounce from 'lodash.debounce';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import { composeEventHandlers } from '../../tools/events';
 import { keys, matches } from '../../internal/keyboard';
+import { usePrefix } from '../../internal/usePrefix';
 
-const { prefix } = settings;
 const getInstanceId = setupGetInstanceId();
 const TooltipDefinition = ({
   id,
@@ -30,6 +29,7 @@ const TooltipDefinition = ({
   tooltipText,
   ...rest
 }) => {
+  const prefix = usePrefix();
   const [allowTooltipVisibility, setAllowTooltipVisibility] = useState(true);
   const [tooltipVisible, setTooltipVisible] = useState(false);
   const tooltipId = id || `definition-tooltip-${getInstanceId()}`;
diff --git a/packages/react/src/components/TooltipIcon/TooltipIcon.js b/packages/react/src/components/TooltipIcon/TooltipIcon.js
index ae21635d3da0..2a63b180dd51 100644
--- a/packages/react/src/components/TooltipIcon/TooltipIcon.js
+++ b/packages/react/src/components/TooltipIcon/TooltipIcon.js
@@ -8,13 +8,12 @@
 import cx from 'classnames';
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { settings } from 'carbon-components';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import { composeEventHandlers } from '../../tools/events';
 import { keys, matches } from '../../internal/keyboard';
 import toggleClass from '../../tools/toggleClass';
+import { usePrefix } from '../../internal/usePrefix';
 
-const { prefix } = settings;
 const getInstanceId = setupGetInstanceId();
 const TooltipIcon = ({
   id,
@@ -32,6 +31,7 @@ const TooltipIcon = ({
   tooltipText,
   ...rest
 }) => {
+  const prefix = usePrefix();
   const [allowTooltipVisibility, setAllowTooltipVisibility] = useState(true);
   const [isHovered, setIsHovered] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
diff --git a/packages/react/src/components/UnorderedList/UnorderedList.js b/packages/react/src/components/UnorderedList/UnorderedList.js
index 3b9d3fe9d490..9963a4c6e355 100644
--- a/packages/react/src/components/UnorderedList/UnorderedList.js
+++ b/packages/react/src/components/UnorderedList/UnorderedList.js
@@ -8,9 +8,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
-import { settings } from 'carbon-components';
-
-const { prefix } = settings;
+import { usePrefix } from '../../internal/usePrefix';
 
 const UnorderedList = ({
   children,
@@ -19,6 +17,7 @@ const UnorderedList = ({
   isExpressive,
   ...other
 }) => {
+  const prefix = usePrefix();
   const classNames = classnames(`${prefix}--list--unordered`, className, {
     [`${prefix}--list--nested`]: nested,
     [`${prefix}--list--expressive`]: isExpressive,