(Picklist): add useInitComponentStyle()

Author: msmx-mnakagawa

src/scripts/Picklist.tsx

@@ -17,7 +17,7 @@ import { FormElement, FormElementProps } from './FormElement';
 import { Icon } from './Icon';
 import { AutoAlign } from './AutoAlign';
 import { DropdownMenuProps } from './DropdownMenu';
-import { isElInChildren } from './util';
+import { registerStyle, isElInChildren } from './util';
 import { ComponentSettingsContext } from './ComponentSettings';
 import { useControlledValue, useEventCallback, useMergeRefs } from './hooks';
 import { createFC } from './common';
@@ -150,6 +150,20 @@ const PicklistContext = createContext<{
   optionIdPrefix: '',
 });
 
+/**
+ *
+ */
+function useInitComponentStyle() {
+  useEffect(() => {
+    registerStyle('picklist', [
+      [
+        '.react-slds-picklist-dropdown',
+        '{ left: 0; transform: translateX(0); }',
+      ],
+    ]);
+  }, []);
+}
+
 /**
  *
  */
@@ -225,6 +239,8 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       ...rprops
     } = props;
 
+    useInitComponentStyle();
+
     const fallbackId = useId();
     const id = id_ ?? fallbackId;
     const listboxId = `${id}-listbox`;
@@ -528,6 +544,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       }
     );
     const dropdownClassNames = classnames(
+      'react-slds-picklist-dropdown',
       'slds-dropdown',
       'slds-dropdown_length-5',
       menuSize ? `slds-dropdown_${menuSize}` : 'slds-dropdown_fluid'