diff --git a/packages/react-ui/components/Autocomplete/Autocomplete.styles.ts b/packages/react-ui/components/Autocomplete/Autocomplete.styles.ts
index 3864229ce47..3554cdddf92 100644
--- a/packages/react-ui/components/Autocomplete/Autocomplete.styles.ts
+++ b/packages/react-ui/components/Autocomplete/Autocomplete.styles.ts
@@ -11,9 +11,10 @@ export const getStyles = (emotion: Emotion) =>
         width: ${t.inputWidth};
       `;
     },
-  noPortal() {
-    return css`
+
+    noPortal() {
+      return emotion.css`
       position: relative;
     `;
-  },
+    },
   });
diff --git a/packages/react-ui/components/Calendar/CalendarDay.tsx b/packages/react-ui/components/Calendar/CalendarDay.tsx
index 347c10368c7..65a25e18fdd 100644
--- a/packages/react-ui/components/Calendar/CalendarDay.tsx
+++ b/packages/react-ui/components/Calendar/CalendarDay.tsx
@@ -2,7 +2,7 @@ import React, { PropsWithChildren, useContext, memo } from 'react';
 
 import { useLocaleForControl } from '../../lib/locale/useLocaleForControl';
 import { ThemeContext } from '../../lib/theming/ThemeContext';
-import { cx } from '../../lib/theming/Emotion';
+import { cx, useEmotion } from '../../lib/theming/Emotion';
 import { isTheme2022 } from '../../lib/theming/ThemeHelpers';
 import { DatePickerLocaleHelper } from '../DatePicker/locale';
 import { InternalDate } from '../../lib/date/InternalDate';
@@ -10,7 +10,7 @@ import { LocaleContext } from '../../lib/locale';
 import { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';
 import { forwardRefAndName } from '../../lib/forwardRefAndName';
 
-import { styles } from './DayCellView.styles';
+import { getStyles } from './DayCellView.styles';
 import { CalendarDataTids } from './Calendar';
 
 export interface CalendarDayProps extends React.HTMLAttributes<HTMLButtonElement> {
@@ -41,6 +41,7 @@ export const CalendarDay = memo(
       ref: React.Ref<HTMLButtonElement>,
     ) {
       const theme = useContext(ThemeContext);
+      const emotion = useEmotion();
       const _isTheme2022 = isTheme2022(theme);
 
       const { langCode } = useContext(LocaleContext);
@@ -51,6 +52,7 @@ export const CalendarDay = memo(
 
       const { date: day } = internalDate.getComponentsLikeNumber();
       const caption = children ?? day;
+      const styles = getStyles(emotion);
 
       return (
         <button
diff --git a/packages/react-ui/components/Calendar/DayCellView.styles.ts b/packages/react-ui/components/Calendar/DayCellView.styles.ts
index f68bb313334..059672a9490 100644
--- a/packages/react-ui/components/Calendar/DayCellView.styles.ts
+++ b/packages/react-ui/components/Calendar/DayCellView.styles.ts
@@ -1,22 +1,21 @@
-import { css, memoizeStyle } from '../../lib/theming/Emotion';
 import type { Emotion } from '@emotion/css/create-instance';
 
-import { memoizeStyle, prefix } from '../../lib/theming/Emotion';
+import { memoizeStyle } from '../../lib/theming/Emotion';
 import { Theme } from '../../lib/theming/Theme';
-import { resetButton } from '../../lib/styles/Mixins';
 
-export const getStyles = (emotion: Emotion) =>
-  memoizeStyle({
+export const getStyles = (emotion: Emotion) => {
+  return memoizeStyle({
     cell(t: Theme) {
       return emotion.css`
         flex: 1 1 ${t.calendarCellWidth};
         height: ${t.calendarCellHeight};
     `;
-  },
-  day(t: Theme) {
-    return css`
-      width: 100%;
-      height: 100%;
+    },
+
+    day(t: Theme) {
+      return emotion.css`
+        width: 100%;
+        height: 100%;
 
         background: ${t.calendarCellBg};
         border: 1px solid transparent;
@@ -62,10 +61,11 @@ export const getStyles = (emotion: Emotion) =>
       `;
     },
 
-  todayCaption2022(t: Theme) {
+    todayCaption2022(t: Theme) {
       return emotion.css`
         padding-bottom: 2px;
         border-bottom: ${t.calendarCellTodayBorder};
       `;
     },
   });
+};
diff --git a/packages/react-ui/components/Calendar/DayCellView.tsx b/packages/react-ui/components/Calendar/DayCellView.tsx
index c759f99081b..280cb416f01 100644
--- a/packages/react-ui/components/Calendar/DayCellView.tsx
+++ b/packages/react-ui/components/Calendar/DayCellView.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useContext } from 'react';
 
 import { useEmotion } from '../../lib/theming/Emotion';
 import { InternalDateTransformer } from '../../lib/date/InternalDateTransformer';
 import { useTheme } from '../../lib/theming/useTheme';
 
-import { styles } from './DayCellView.styles';
+import { getStyles } from './DayCellView.styles';
 import { CalendarContext } from './CalendarContext';
 import { DayCellViewModel } from './DayCellViewModel';
 import * as CDS from './CalendarDateShape';
diff --git a/packages/react-ui/components/Calendar/Month.tsx b/packages/react-ui/components/Calendar/Month.tsx
index f7103765d77..36d2c4429b2 100644
--- a/packages/react-ui/components/Calendar/Month.tsx
+++ b/packages/react-ui/components/Calendar/Month.tsx
@@ -12,7 +12,7 @@ import { MonthView } from './MonthView';
 import { DayCellView } from './DayCellView';
 import * as CalendarScrollEvents from './CalendarScrollEvents';
 import { getStyles } from './MonthView.styles';
-import { styles as cellStyles } from './DayCellView.styles';
+import { getStyles as getCellStyles } from './DayCellView.styles';
 
 interface MonthProps {
   top: number;
@@ -134,6 +134,7 @@ class MonthDayGrid extends React.Component<MonthDayGridProps> {
 
   public renderMain() {
     const styles = getStyles(this.emotion);
+    const cellStyles = getCellStyles(this.emotion);
     const leadingDays = Array.from({ length: this.props.offset }, (_, i) => (
       <div key={`leading_${i}`} className={cellStyles.cell(this.theme)} />
     ));
diff --git a/packages/react-ui/components/Calendar/MonthView.styles.ts b/packages/react-ui/components/Calendar/MonthView.styles.ts
index f445680e312..83d4fab69b6 100644
--- a/packages/react-ui/components/Calendar/MonthView.styles.ts
+++ b/packages/react-ui/components/Calendar/MonthView.styles.ts
@@ -29,11 +29,11 @@ export const getStyles = (emotion: Emotion) =>
       `;
     },
 
-  monthMobile() {
-    return css`
-      width: 100%;
-    `;
-  },
+    monthMobile() {
+      return emotion.css`
+        width: 100%;
+      `;
+    },
 
     header() {
       return emotion.css`
@@ -57,10 +57,10 @@ export const getStyles = (emotion: Emotion) =>
       `;
     },
 
-  /* Note: this could've been
-   * display: grid;
-   * grid-template-columns: repeat(7, minmax(0, 1fr));
-   */
+    /* Note: this could've been
+     * display: grid;
+     * grid-template-columns: repeat(7, minmax(0, 1fr));
+     */
     monthDayGrid(t: Theme) {
       return emotion.css`
         line-height: ${t.calendarCellLineHeight};
@@ -68,10 +68,10 @@ export const getStyles = (emotion: Emotion) =>
       flex-direction: column;
       padding: ${t.calendarGridRowSpacing} 0px;
     `;
-  },
+    },
 
-  monthDayRow(t: Theme) {
-    return css`
+    monthDayRow(t: Theme) {
+      return emotion.css`
       display: flex;
       justify-content: space-between;
 
@@ -79,10 +79,10 @@ export const getStyles = (emotion: Emotion) =>
         margin-top: ${t.calendarGridRowSpacing};
       }
     `;
-  },
+    },
 
-  nativeSelect() {
-    return css`
+    nativeSelect() {
+      return emotion.css`
       position: absolute;
       top: -12px;
       right: 0;
diff --git a/packages/react-ui/components/Calendar/MonthView.tsx b/packages/react-ui/components/Calendar/MonthView.tsx
index d6050b5ba4e..418472553da 100644
--- a/packages/react-ui/components/Calendar/MonthView.tsx
+++ b/packages/react-ui/components/Calendar/MonthView.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 
 import { DateSelect } from '../../internal/DateSelect';
 import * as ColorFunctions from '../../lib/styles/ColorFunctions';
@@ -84,7 +84,7 @@ export function MonthView(props: MonthViewProps) {
   return (
     <div
       data-tid={CalendarDataTids.month}
-      className={cx({ [styles.month(theme)]: true, [styles.monthMobile()]: isMobile })}
+      className={emotion.cx({ [styles.month(theme)]: true, [styles.monthMobile()]: isMobile })}
       style={{ top }}
       key={month + '-' + year}
     >
diff --git a/packages/react-ui/internal/DateSelect/DateSelect.styles.ts b/packages/react-ui/internal/DateSelect/DateSelect.styles.ts
index 099d6a2860e..91f242f24ae 100644
--- a/packages/react-ui/internal/DateSelect/DateSelect.styles.ts
+++ b/packages/react-ui/internal/DateSelect/DateSelect.styles.ts
@@ -192,8 +192,8 @@ export const getStyles = (emotion: Emotion) =>
       `;
     },
 
-  nativeSelect() {
-    return css`
+    nativeSelect() {
+      return emotion.css`
       position: absolute;
       top: -12px;
       right: 0;
@@ -204,5 +204,5 @@ export const getStyles = (emotion: Emotion) =>
       opacity: 0;
       border: none;
     `;
-  },
+    },
   });
diff --git a/packages/react-ui/internal/DateSelect/DateSelect.tsx b/packages/react-ui/internal/DateSelect/DateSelect.tsx
index e82d8bd715f..d8b06a37a56 100644
--- a/packages/react-ui/internal/DateSelect/DateSelect.tsx
+++ b/packages/react-ui/internal/DateSelect/DateSelect.tsx
@@ -456,6 +456,7 @@ export class DateSelect extends React.PureComponent<DateSelectProps, DateSelectS
     for (let item = from; item <= to; ++item) {
       items.push({ item, disabled: item < min || item > max });
     }
+    const styles = getStyles(this.emotion);
 
     return (
       // eslint-disable-next-line jsx-a11y/no-onchange