Exported Styled components using module css

[M1K3Yio]

Currently today we have working solution with importing styling.css for a exported styled component.

Example: react-day-picker-styled-css

We are in the process of updating our nx monorepo and with this next js has updated and we've encountered an issue where we now need to use style.module.css.

Error:

Failed to compile.

../../node_modules/react-day-picker/dist/style.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global

While working through this, I am not able to export a styled component that would use our custom styling, while importing the module css.

Example: react-day-picker-styled-module-css

Notice the caption is not properly centered along with some other details.

Any help would be greatly appreciated.

[gpbl]

Hi @M1K3Yio!

I'm not sure how to replicate your issue, since I have no experience with styled-components.

The Sandboxes provided are not clear enough to understand your problem. Could you please cleanup your Sandbox so it runs full on typescript and the example is easier to understand? From the sandbox it seems the code you are trying to write is like this:

import { DayPicker } from "react-day-picker";
import styled from "styled-components";
const StyledDayPicker = styled(DayPickerUI);

function App() {
  return <StyledDayPicker />
}

I have no idea what styled(DayPickerUI) does: I wouldn't expect this to work as intended. What do you want is having an object with the CSS class names to pass it to the classNames prop.