Accessing props in NextJS 13 using SWC

[AtomSpy]

I have followed the Next JS documentation specifically for using styled components with SWC. However, I've never been able to adapt CSS based on props. Many people have said styled components works fine with Next 13 and SWC, but when pressed it always transpires that they've never tried to adapt css using props. As a result, I'm looking for a definitive answer on the matter.

Is it possible to adapt css in styled components using props in Next JS 13 using the SWC compiler?

[noderox]

Hi, KevinStark86,

Yes, it is possible to use props to adapt CSS in styled-components in Next.js 13 with the SWC compiler. The styled-components library fully supports this feature and it works seamlessly with Next.js.

Here's an example of how you can use props to adapt CSS in a styled component with Next.js and styled-components:

import styled from 'styled-components';

const Button = styled.buttonbackground-color: ${props => props.primary ? 'blue' : 'red'}; color: white; padding: 10px 20px; border: none; border-radius: 4px;;

function App() {
return (

Normal Button
Primary Button

);
}

I hope that make sense to you.

[quantizor]

Yes, props work fine with styled-components and the Next.js SWC plugin. Make sure your next.config.js has the styled-components compiler option enabled:

// next.config.js
module.exports = {
  compiler: {
    styledComponents: true,
  },
};

Props-based styling works identically whether you use SWC or Babel — the compiler plugin only handles displayName and SSR optimizations, not runtime behavior.