I have a NextJS 14 application. I am implementing a carousel component using an external npm package. Let's just pick the popular react-slick as an example.
After I create a minimal carousel component using react-slick my app crashes in dev and I get the error:
"Error: Super expression must either be null or a function, not undefined"
All of the StackOverflow answers suggest this happens because Next 14 is server-side rendered by default, and the carousel needs to be client-side for interactivity, so I need to use 'use client' at the top of the file. That works.
However, I would like to override some of the styles that come with the component, and adding them in my /src/styles/globals.css file has no effect whatsoever.
I have tried using hyper-specific selectors, and I have tried CSS modules as well. None of these options have any effect on the client-side rendered component styling.
This is likely because styles are created, purged, and minified at build time and the client-side component is only rendered on the client.
Is there any way to style a 'use clients' component in a NextJS 14 server-side rendered page?