From f73ff6d2290445db1dcb692aba470e966057137b Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Fri, 23 Feb 2024 20:33:15 +0530 Subject: [PATCH 1/3] [zero] Minor wording changes --- packages/zero-runtime/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/zero-runtime/README.md b/packages/zero-runtime/README.md index 514eb20d7c4fae..d5cec8143a57bf 100644 --- a/packages/zero-runtime/README.md +++ b/packages/zero-runtime/README.md @@ -47,7 +47,7 @@ npm install @mui/zero-runtime npm install --save-dev @mui/zero-vite-plugin ``` -Then, in your vite config file file, import the plugin and wrap the exported config object: +Then, in your vite config file, import the plugin and pass it to the `plugins` array as shown: ```js import { zeroVitePlugin } from '@mui/zero-vite-plugin'; @@ -269,7 +269,7 @@ Theming is an **optional** feature that lets you reuse the same values, such as > **💡 Good to know**: > -> The **theme** object are used at build time without relying on React context like common CSS-in-JS libraries. This means that components created by zero-runtime `styled` will be React Server Component by default and still get benefits from theming. +> The **theme** object is used at build time and does not exist in the final JS bundle. This means that components created using zero-runtime `styled` can be using with React Server Components by default while still getting the benefits of theming. For example, in Next.js, you can define a theme in the `next.config.js` file like this: @@ -395,7 +395,7 @@ However, if you want to control the color scheme based on application logic, for }); ``` -Note that you need to add a logic to a button by yourself. Here is an example of how to do it: +Note that you need to add the logic to a button by yourself. Here is an example of how to do it: ```jsx function App() { From 8ec189d1ca60e184e93467ef1832711fd4507add Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Fri, 23 Feb 2024 23:58:45 +0530 Subject: [PATCH 2/3] Update packages/zero-runtime/README.md Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Signed-off-by: Brijesh Bittu --- packages/zero-runtime/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/zero-runtime/README.md b/packages/zero-runtime/README.md index d5cec8143a57bf..b52b93d2da1799 100644 --- a/packages/zero-runtime/README.md +++ b/packages/zero-runtime/README.md @@ -47,7 +47,7 @@ npm install @mui/zero-runtime npm install --save-dev @mui/zero-vite-plugin ``` -Then, in your vite config file, import the plugin and pass it to the `plugins` array as shown: +Then, in your Vite config file, import the plugin and pass it to the `plugins` array as shown: ```js import { zeroVitePlugin } from '@mui/zero-vite-plugin'; From f3531b761a939031597cb8841d03fb6a11a959c6 Mon Sep 17 00:00:00 2001 From: Brijesh Bittu Date: Fri, 23 Feb 2024 23:59:04 +0530 Subject: [PATCH 3/3] Update packages/zero-runtime/README.md Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Signed-off-by: Brijesh Bittu --- packages/zero-runtime/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/zero-runtime/README.md b/packages/zero-runtime/README.md index b52b93d2da1799..1024a9d8078e94 100644 --- a/packages/zero-runtime/README.md +++ b/packages/zero-runtime/README.md @@ -269,7 +269,7 @@ Theming is an **optional** feature that lets you reuse the same values, such as > **💡 Good to know**: > -> The **theme** object is used at build time and does not exist in the final JS bundle. This means that components created using zero-runtime `styled` can be using with React Server Components by default while still getting the benefits of theming. +> The **theme** object is used at build time and does not exist in the final JS bundle. This means that components created using zero-runtime's `styled` can be used with React Server Components by default while still getting the benefits of theming. For example, in Next.js, you can define a theme in the `next.config.js` file like this: