Added compiler and confirmed styled components works in Title

Author: klezi10

components/snippets/Title.js

@@ -1,15 +1,30 @@
-import styles from '@/styles/Title.module.scss';
+// import styles from '@/styles/Title.module.scss';
+import styled from 'styled-components';
 
-const Title = ({ title, customClass }) => {
+export const TitleStyle = styled.h2`
+  color: red;
+`;
+
+const Title = ({ title }) => {
   return (
-    <h2
-      className={
-        customClass ? `${styles.title} ${styles[customClass]}` : styles.title
-      }
-    >
-      {title}
-    </h2>
+    <div>
+      <TitleStyle>{title}</TitleStyle>
+    </div>
   );
 };
 
 export default Title;
+
+// const Title = ({ title, customClass }) => {
+//   return (
+//     <h2
+//       className={
+//         customClass ? `${styles.title} ${styles[customClass]}` : styles.title
+//       }
+//     >
+//       {title}
+//     </h2>
+//   );
+// };
+
+// export default Title;

next.config.js

@@ -19,4 +19,26 @@ module.exports = withPWA({
       },
     ],
   },
+  compiler: {
+    // see https://styled-components.com/docs/tooling#babel-plugin for more info on the options.
+    styledComponents:
+      true |
+      {
+        // Enabled by default in development, disabled in production to reduce file size,
+        // setting this will override the default for all environments.
+        displayName: true,
+        // Enabled by default.
+        ssr: true,
+        // Enabled by default.
+        fileName: true,
+        // Empty by default.
+        topLevelImportPaths: '',
+        // Defaults to ["index"].
+        meaninglessFileNames: '',
+        // Enabled by default.
+        cssProp: true,
+        // Empty by default.
+        namespace: '',
+      },
+  },
 });

package.json

@@ -37,5 +37,8 @@
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
     "prettylint": "^1.0.0"
+  },
+  "resolutions": {
+    "styled-components": "^5"
   }
 }