MultiSelect: Can't hide or customize header or items wrapper using stlyed components

[lukzfern]

Describe the bug

Im trying to do 2 things with the MultiSelect component, hide the header and cusomize the items inside of the wrapper, but seems like the styles im targeting are not working:

<StyledMultiSelect
id="abc"
options={options}
placeholder="Test"
value={selectedValue}
onChange={(e) => setSelectedValue(e.value)}
/>

export const StyledMultiSelect = styled(MultiSelect)({
".p-multiselect-header": { display: "none" },
".p-multiselect-item": { background "red" }
});

none of these are working for me.

Reproducer

demo: https://stackblitz.com/edit/hv8ood?file=src%2FApp.jsx

System Information

"dependencies": {
    "@types/react": "^18.2.38",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-transition-group": "^4.4.5",
    "primereact": "latest",
    "primeicons": "^7.0.0",
    "vite": "latest",
    "@vitejs/plugin-react": "latest",
    "primeflex": "^3.3.1",
    "react-scripts": "5.0.1",
"@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
  }

Steps to reproduce the behavior

1. Start a react project with the library
2. Try to hide the MultiSelect header using the style selector
3. Try to style each option in the dropdown using the style selector

Expected behavior

You should be able to hide the header easily and also style the dropdown items using the selector

[melloware]

For styling the items you want itemTemplate see: https://primereact.org/multiselect/#template

Second I can hide the header with this CSS

.p-multiselect-panel .p-multiselect-header {
  display:none;
}

[lukzfern]

Yeah that's why I said im using styled components, I can do it with CSS, but as my description says, im using the StyledMultiSelect I created, and even when targeting the correct css styles, they are not applying. My question was because with other components like table, paginator, etc. it works perfectly fine.

[github-actions]

Please fork the Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

[lukzfern]

demo: https://stackblitz.com/edit/hv8ood?file=src%2FApp.jsx

[melloware]

@lukzfern it looks like an EMOTION issue. If you look at the DOM in the inspector the panel does not EXIST when the component is created. It is created and added to the DOM only on popup. So my guess is Emotion doesn't see those in the Dom at Render time so it has nothing to apply. You might have to look at Emotion on how to trigger updating styles when the component re-renders...

A lot of PrimeReact components do this so this won't be your last issue.