From f4fdac2458d1da9afcd8d99e637adb7e986311f6 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Tue, 28 May 2024 19:32:25 +0530
Subject: [PATCH] [docs] Fix styleOverrides usage in README

Signed-off-by: Brijesh Bittu <brijeshb42@gmail.com>
---
 README.md | 56 +++++++++++++++++++++++++++++--------------------------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/README.md b/README.md
index 11155ca5..116bce95 100644
--- a/README.md
+++ b/README.md
@@ -1054,16 +1054,18 @@ module.exports = withPigment(
   { ...nextConfig },
   {
     theme: {
-      styleOverrides: {
+      components: {
         PigmentStat: {
-          root: {
-            backgroundColor: 'tomato',
-          },
-          value: {
-            color: 'white',
-          },
-          unit: {
-            color: 'white',
+          styleOverrides: {
+            root: {
+              backgroundColor: 'tomato',
+            },
+            value: {
+              color: 'white',
+            },
+            unit: {
+              color: 'white',
+            },
           },
         },
       },
@@ -1084,25 +1086,27 @@ module.exports = withPigment(
         primary: 'tomato',
         primaryLight: 'lightcoral',
       },
-      styleOverrides: {
+      components: {
         PigmentStat: {
-          root: ({ theme }) => ({
-            backgroundColor: 'tomato',
-            variants: [
-              {
-                props: { variant: 'outlined' },
-                style: {
-                  border: `2px solid ${theme.colors.primary}`,
-                  backgroundColor: theme.colors.primaryLight,
+          styleOverrides: {
+            root: ({ theme }) => ({
+              backgroundColor: 'tomato',
+              variants: [
+                {
+                  props: { variant: 'outlined' },
+                  style: {
+                    border: `2px solid ${theme.colors.primary}`,
+                    backgroundColor: theme.colors.primaryLight,
+                  },
                 },
-              },
-            ],
-          }),
-          value: {
-            color: 'white',
-          },
-          unit: {
-            color: 'white',
+              ],
+            }),
+            value: {
+              color: 'white',
+            },
+            unit: {
+              color: 'white',
+            },
           },
         },
       },