From 38c417ea3697c7d9291d3050d95718ea43496fc1 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijeshb42@gmail.com>
Date: Tue, 23 Jan 2024 22:30:53 +0530
Subject: [PATCH] Add variants callback syntax

---
 packages/zero-runtime/README.md | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/zero-runtime/README.md b/packages/zero-runtime/README.md
index e579e0f7087d58..74bed58014f878 100644
--- a/packages/zero-runtime/README.md
+++ b/packages/zero-runtime/README.md
@@ -16,7 +16,6 @@ npm install --save-dev @mui/zero-next-plugin
 npm install --save-dev @mui/zero-vite-plugin
 ```
 
-
 #### Next.js
 
 In your `next.config.js` file,
@@ -47,7 +46,6 @@ Setting `sourceMap` to true will take you to the style definition in the JS file
 
 #### Vite
 
-
 In your vite config file,
 
 1. Import the plugin
@@ -173,6 +171,16 @@ const Button = styled.button(() => ({
         // Styles to be applied when <Button size="small" color="primary" />
       },
     },
+    {
+      // If key value pair doesn't suffice, you can use the callback syntax
+      // to return `true` if you want the styles to be applied
+      props({ children }) {
+        return !!children;
+      },
+      style: {
+        // CSS
+      },
+    },
   ],
 }));
 ```