From e776cd232e9d91b1c1eb3d38a5df64ac3e88dec5 Mon Sep 17 00:00:00 2001
From: Archit Sharma <74408634+iArchitSharma@users.noreply.github.com>
Date: Fri, 4 Feb 2022 02:54:43 +0700
Subject: [PATCH] Added resources for Styled jsx (#1098)

* Added resources for Styled jsx

* Update content/roadmaps/100-frontend/content/112-modern-css/102-styled-jsx.md

* Update content/roadmaps/100-frontend/content/112-modern-css/102-styled-jsx.md

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>
---
 .../content/112-modern-css/102-styled-jsx.md             | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/content/roadmaps/100-frontend/content/112-modern-css/102-styled-jsx.md b/content/roadmaps/100-frontend/content/112-modern-css/102-styled-jsx.md
index 452a3193f..081d031c9 100644
--- a/content/roadmaps/100-frontend/content/112-modern-css/102-styled-jsx.md
+++ b/content/roadmaps/100-frontend/content/112-modern-css/102-styled-jsx.md
@@ -1 +1,8 @@
-# Styled jsx
\ No newline at end of file
+# Styled JSX
+
+Styled JSX is a CSS-in-JS library that allows you to write encapsulated and scoped CSS to style your components. The styles you introduce for one component won't affect other components, allowing you to add, change and delete styles without worrying about unintended side effects.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://github.com/vercel/styled-jsx'>Getting started</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=SM5uVbfgfdo'>Styled JSX in Next.js: Master Next.js</BadgeLink>