Greetings! Our team has recently updated to next.js 13 and react 18, and integrated styled components with the next config setting. However, we have encountered some unusual behaviors.
- One issue arises when extending styles, as shown below:
const CardWrapper = styled.div`
color: red
`
const Card = styled(CardWrapper)`
color: green
`
At times, incorrect styles are applied due to discrepancies between styles, but this only occurs after building and launching the project.
During development, we notice that the classNames appear minified instead of the expected full class names as specified in the documentation.
We also encounter errors like the following: next-dev.js?3515:20 Warning: Prop
classNamedid not match. Server: "sc-fSRBKe btBFdf" Client: "sc-bCfvAP haamXM"
Here is a snippet of our next configuration:
next config:
const nextConfig = {
images: {
domains: ['images.ctfassets.net'],
},
compiler: {
// ssr and displayName are configured by default
styledComponents: true,
},
output: 'standalone',
async redirects() {
...
}
}
module.exports = nextConfig
Additionally, we still maintain the .babelrc.js file for internal packages.