diff --git a/packages/date-picker/src/DatePicker.tsx b/packages/date-picker/src/DatePicker.tsx
index f63175af..09f8a88e 100644
--- a/packages/date-picker/src/DatePicker.tsx
+++ b/packages/date-picker/src/DatePicker.tsx
@@ -145,7 +145,7 @@ export default function DatePicker({
 
     return (
         <Fragment>
-            <Style>{STYLES}</Style>
+            <Style href="@acusti/date-picker/DatePicker">{STYLES}</Style>
             <div
                 className={clsx(ROOT_CLASS_NAME, className, {
                     'two-up': isTwoUp,
diff --git a/packages/date-picker/src/MonthCalendar.tsx b/packages/date-picker/src/MonthCalendar.tsx
index 3a10be9f..ecd30d56 100644
--- a/packages/date-picker/src/MonthCalendar.tsx
+++ b/packages/date-picker/src/MonthCalendar.tsx
@@ -99,7 +99,7 @@ export default function MonthCalendar({
 
     return (
         <Fragment>
-            <Style>{STYLES}</Style>
+            <Style href="@acusti/date-picker/MonthCalendar">{STYLES}</Style>
             <div className={clsx(ROOT_CLASS_NAME, className)}>
                 <div className={`${ROOT_CLASS_NAME}-month-title`}>
                     <h3 className={`${ROOT_CLASS_NAME}-month-title-text`}>{title}</h3>
diff --git a/packages/dropdown/src/Dropdown.tsx b/packages/dropdown/src/Dropdown.tsx
index 17c672e7..ea7ef938 100644
--- a/packages/dropdown/src/Dropdown.tsx
+++ b/packages/dropdown/src/Dropdown.tsx
@@ -693,7 +693,7 @@ export default function Dropdown({
 
     return (
         <Fragment>
-            <Style>{STYLES}</Style>
+            <Style href="@acusti/dropdown/Dropdown">{STYLES}</Style>
             <div
                 className={clsx(ROOT_CLASS_NAME, className, {
                     disabled,