{"name":"MUI Style Variables","github_url":"https:\/\/github.com\/zesty-io\/module-mui-styles","info":"\u003Ch1 dir=\u0022auto\u0022 tabindex=\u0022-1\u0022\u003EZesty styles-variables with MUI class names\u003C\/h1\u003E\n\u003Cp dir=\u0022auto\u0022\u003EThis feature will help to incorporate zesty instance style variables to Material UI Theme.\u003C\/p\u003E\n\u003Ch2 dir=\u0022auto\u0022 tabindex=\u0022-1\u0022\u003E\u003Ca id=\u0022user-content-running-the-script\u0022 aria-hidden=\u0022true\u0022 href=\u0022https:\/\/github.com\/zesty-io\/module-mui-styles\/blob\/main\/README.md#running-the-script\u0022\u003E\u003Csvg viewbox=\u00220 0 16 16\u0022 version=\u00221.1\u0022 width=\u002216\u0022 height=\u002216\u0022 aria-hidden=\u0022true\u0022\u003E\u003Cpath d=\u0022m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\u0022\u003E\u003C\/path\u003E\u003C\/svg\u003E\u003C\/a\u003E\u003Cg-emoji alias=\u0022arrows_clockwise\u0022 fallback-src=\u0022https:\/\/github.githubassets.com\/images\/icons\/emoji\/unicode\/1f503.png\u0022\u003E\ud83d\udd03\u003C\/g-emoji\u003ERunning the script\u003C\/h2\u003E\n\u003Cp dir=\u0022auto\u0022\u003EUpon installing\u0026nbsp;\u003Ca href=\u0022https:\/\/github.com\/zesty-io\/nextjs-starter\u0022\u003Ezesty next starter app\u003C\/a\u003E, the\u0026nbsp;\u003Ccode\u003Esync.js\u003C\/code\u003E\u0026nbsp;will run for the first time. But there will be always a changes specially in the style variables. Fortunately we can sync the instance styles anytime to next starter app anytime by running the command below to the console.\u003C\/p\u003E\n\u003Cdiv\u003E\n\u003Cpre\u003E\u003Ccode\u003Enpm run sync\n\u003C\/code\u003E\u003C\/pre\u003E\n\u003Cdiv\u003E\u003Cclipboard-copy aria-label=\u0022Copy\u0022 data-copy-feedback=\u0022Copied!\u0022 data-tooltip-direction=\u0022w\u0022 value=\u0022npm run sync\u0022 role=\u0022button\u0022 tabindex=\u00220\u0022\u003E\u003Csvg aria-hidden=\u0022true\u0022 height=\u002216\u0022 viewbox=\u00220 0 16 16\u0022 version=\u00221.1\u0022 width=\u002216\u0022 data-view-component=\u0022true\u0022\u003E\u003Cpath d=\u0022M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z\u0022\u003E\u003C\/path\u003E\u003Cpath d=\u0022M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z\u0022\u003E\u003C\/path\u003E\u003C\/svg\u003E\u003C\/clipboard-copy\u003E\u003C\/div\u003E\n\u003C\/div\u003E\n\u003Cp\u003E\u003C\/p\u003E\n\u003Ch2 dir=\u0022auto\u0022 tabindex=\u0022-1\u0022\u003E\u003Ca id=\u0022user-content-generated-files\u0022 aria-hidden=\u0022true\u0022 href=\u0022https:\/\/github.com\/zesty-io\/module-mui-styles\/blob\/main\/README.md#generated-files\u0022\u003E\u003Csvg viewbox=\u00220 0 16 16\u0022 version=\u00221.1\u0022 width=\u002216\u0022 height=\u002216\u0022 aria-hidden=\u0022true\u0022\u003E\u003Cpath d=\u0022m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\u0022\u003E\u003C\/path\u003E\u003C\/svg\u003E\u003C\/a\u003E\u003Cg-emoji alias=\u0022page_with_curl\u0022 fallback-src=\u0022https:\/\/github.githubassets.com\/images\/icons\/emoji\/unicode\/1f4c3.png\u0022\u003E\ud83d\udcc3\u003C\/g-emoji\u003EGenerated Files\u003C\/h2\u003E\n\u003Cul dir=\u0022auto\u0022\u003E\n\u003Cli\u003EstyleVariables.json\u0026nbsp;- located at folder (\u003Cg-emoji alias=\u0022file_folder\u0022 fallback-src=\u0022https:\/\/github.githubassets.com\/images\/icons\/emoji\/unicode\/1f4c1.png\u0022\u003E\ud83d\udcc1\u003C\/g-emoji\u003E\u0026nbsp;\u0022.zesty\u0022\u0026nbsp;). It contains the fetched style variables data from the API. e.g:\u003C\/li\u003E\n\u003C\/ul\u003E\n\u003Cdiv dir=\u0022auto\u0022\u003E\n\u003Cpre\u003E{\n  \u0022brand-primary\u0022: \u0022#337ab7\u0022,\n  \u0022brand-success\u0022: \u0022#5cb85c\u0022,\n  \u0022brand-warning\u0022: \u0022#f0ad4e\u0022,\n  \u0022brand-danger\u0022: \u0022#d9534f\u0022,\n  \u0022brand-info\u0022: \u0022#5bc0de\u0022,\n}\u003C\/pre\u003E\n\u003Cdiv\u003E\u003Cclipboard-copy aria-label=\u0022Copy\u0022 data-copy-feedback=\u0022Copied!\u0022 data-tooltip-direction=\u0022w\u0022 value=\u0022{\n  \u0026quot;brand-primary\u0026quot;: \u0026quot;#337ab7\u0026quot;,\n  \u0026quot;brand-success\u0026quot;: \u0026quot;#5cb85c\u0026quot;,\n  \u0026quot;brand-warning\u0026quot;: \u0026quot;#f0ad4e\u0026quot;,\n  \u0026quot;brand-danger\u0026quot;: \u0026quot;#d9534f\u0026quot;,\n  \u0026quot;brand-info\u0026quot;: \u0026quot;#5bc0de\u0026quot;,\n}\u0022 role=\u0022button\u0022 tabindex=\u00220\u0022\u003E\u003Csvg aria-hidden=\u0022true\u0022 height=\u002216\u0022 viewbox=\u00220 0 16 16\u0022 version=\u00221.1\u0022 width=\u002216\u0022 data-view-component=\u0022true\u0022\u003E\u003Cpath d=\u0022M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z\u0022\u003E\u003C\/path\u003E\u003Cpath d=\u0022M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z\u0022\u003E\u003C\/path\u003E\u003C\/svg\u003E\u003C\/clipboard-copy\u003E\u003C\/div\u003E\n\u003C\/div\u003E\n\u003Cp\u003E\u003C\/p\u003E\n\u003Ch2 dir=\u0022auto\u0022 tabindex=\u0022-1\u0022\u003E\u003Ca id=\u0022user-content-\ufe0fconfiguration\u0022 aria-hidden=\u0022true\u0022 href=\u0022https:\/\/github.com\/zesty-io\/module-mui-styles\/blob\/main\/README.md#%EF%B8%8Fconfiguration\u0022\u003E\u003Csvg viewbox=\u00220 0 16 16\u0022 version=\u00221.1\u0022 width=\u002216\u0022 height=\u002216\u0022 aria-hidden=\u0022true\u0022\u003E\u003Cpath d=\u0022m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\u0022\u003E\u003C\/path\u003E\u003C\/svg\u003E\u003C\/a\u003E\u003Cg-emoji alias=\u0022gear\u0022 fallback-src=\u0022https:\/\/github.githubassets.com\/images\/icons\/emoji\/unicode\/2699.png\u0022\u003E\u2699\ufe0f\u003C\/g-emoji\u003EConfiguration\u003C\/h2\u003E\n\u003Col dir=\u0022auto\u0022\u003E\n\u003Cli\u003E\n\u003Cp dir=\u0022auto\u0022\u003EWe should create a file where we can configure the MUI theme customization with instance style variables. In this example the file will be named as:\u0026nbsp;zestyStyleVariables.js\u0026nbsp;under folder\u0026nbsp;\u003Cg-emoji alias=\u0022file_folder\u0022 fallback-src=\u0022https:\/\/github.githubassets.com\/images\/icons\/emoji\/unicode\/1f4c1.png\u0022\u003E\ud83d\udcc1\u003C\/g-emoji\u003E\u0026nbsp;\u0022components\u0022\u0026nbsp;:\u003C\/p\u003E\n\u003Cblockquote\u003E\n\u003Cp dir=\u0022auto\u0022\u003EAfter creating the file, we should import first the dependency of our zesty styles configuration:\u003C\/p\u003E\n\u003C\/blockquote\u003E\n\u003Cdiv dir=\u0022auto\u0022\u003E\n\u003Cpre\u003Eimport { createTheme } from \u0022@mui\/material\/styles\u0022; \/\/ import the createTheme from MUI\nconst styles = require(\u0022.zesty\/styleVariables\u0022) || {}; \/\/ assigning the styleVariables.json to the \u0022styles\u0022 variable\u003C\/pre\u003E\n\u003Cdiv\u003E\u003Cclipboard-copy aria-label=\u0022Copy\u0022 data-copy-feedback=\u0022Copied!\u0022 data-tooltip-direction=\u0022w\u0022 value=\u0022import { createTheme } from \u0026quot;@mui\/material\/styles\u0026quot;; \/\/ import the createTheme from MUI\nconst styles = require(\u0026quot;.zesty\/styleVariables\u0026quot;) || {}; \/\/ assigning the styleVariables.json to the \u0026quot;styles\u0026quot; variable\u0022 role=\u0022button\u0022 tabindex=\u00220\u0022\u003E\u003Csvg aria-hidden=\u0022true\u0022 height=\u002216\u0022 viewbox=\u00220 0 16 16\u0022 version=\u00221.1\u0022 width=\u002216\u0022 data-view-component=\u0022true\u0022\u003E\u003Cpath d=\u0022M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z\u0022\u003E\u003C\/path\u003E\u003Cpath d=\u0022M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z\u0022\u003E\u003C\/path\u003E\u003C\/svg\u003E\u003C\/clipboard-copy\u003E\u003C\/div\u003E\n\u003C\/div\u003E\n\u003Cblockquote\u003E\n\u003Cp dir=\u0022auto\u0022\u003EAccessing a style variable and assigning it to MUI theme:\u003C\/p\u003E\n\u003C\/blockquote\u003E\n\u003Cdiv dir=\u0022auto\u0022\u003E\n\u003Cpre\u003Eimport { createTheme } from \u0022@mui\/material\/styles\u0022;\nconst styles = require(\u0022.zesty\/styleVariables\u0022) || {};\n\n\/\/ customizing MUI theme colors:\nexport default function ZestyStyleVariables() {\n  const zestySettingsTheme = createTheme({\n    palette: {\n      primary: {\n        \/\/Accessing the @brand-primary color\n        main: `${styles[\u0022brand-primary\u0022]}`,\n      },\n    },\n  });\n\n  return zestySettingsTheme;\n}\u003C\/pre\u003E\n\u003Cdiv\u003E\u003Cclipboard-copy aria-label=\u0022Copy\u0022 data-copy-feedback=\u0022Copied!\u0022 data-tooltip-direction=\u0022w\u0022 value=\u0022import { createTheme } from \u0026quot;@mui\/material\/styles\u0026quot;;\nconst styles = require(\u0026quot;.zesty\/styleVariables\u0026quot;) || {};\n\n\/\/ customizing MUI theme colors:\nexport default function ZestyStyleVariables() {\n  const zestySettingsTheme = createTheme({\n    palette: {\n      primary: {\n        \/\/Accessing the @brand-primary color\n        main: \u0026#96;${styles[\u0026quot;brand-primary\u0026quot;]}\u0026#96;,\n      },\n    },\n  });\n\n  return zestySettingsTheme;\n}\u0022 role=\u0022button\u0022 tabindex=\u00220\u0022\u003E\u003Csvg aria-hidden=\u0022true\u0022 height=\u002216\u0022 viewbox=\u00220 0 16 16\u0022 version=\u00221.1\u0022 width=\u002216\u0022 data-view-component=\u0022true\u0022\u003E\u003Cpath d=\u0022M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z\u0022\u003E\u003C\/path\u003E\u003Cpath d=\u0022M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z\u0022\u003E\u003C\/path\u003E\u003C\/svg\u003E\u003C\/clipboard-copy\u003E\u003C\/div\u003E\n\u003C\/div\u003E\n\u003Cblockquote\u003E\n\u003Cp dir=\u0022auto\u0022\u003ECustomizing Header default styles:\u003C\/p\u003E\n\u003C\/blockquote\u003E\n\u003Cdiv dir=\u0022auto\u0022\u003E\n\u003Cpre\u003Eimport { createTheme } from \u0022@mui\/material\/styles\u0022;\nconst styles = require(\u0022.zesty\/styleVariables\u0022) || {};\n\n\/\/ customizing MUI theme colors:\nexport default function ZestyStyleVariables() {\n  const zestySettingsTheme = createTheme({\n    typography: {\n      \/\/ Header styles\n      h1: {\n        fontSize: parseInt(styles[\u0022font-size-h1\u0022]) || 24,\n      },\n    },\n  });\n\n  return zestySettingsTheme;\n}\u003C\/pre\u003E\n\u003Cdiv\u003E\u003Cclipboard-copy aria-label=\u0022Copy\u0022 data-copy-feedback=\u0022Copied!\u0022 data-tooltip-direction=\u0022w\u0022 value=\u0022import { createTheme } from \u0026quot;@mui\/material\/styles\u0026quot;;\nconst styles = require(\u0026quot;.zesty\/styleVariables\u0026quot;) || {};\n\n\/\/ customizing MUI theme colors:\nexport default function ZestyStyleVariables() {\n  const zestySettingsTheme = createTheme({\n    typography: {\n      \/\/ Header styles\n      h1: {\n        fontSize: parseInt(styles[\u0026quot;font-size-h1\u0026quot;]) || 24,\n      },\n    },\n  });\n\n  return zestySettingsTheme;\n}\u0022 role=\u0022button\u0022 tabindex=\u00220\u0022\u003E\u003Csvg aria-hidden=\u0022true\u0022 height=\u002216\u0022 viewbox=\u00220 0 16 16\u0022 version=\u00221.1\u0022 width=\u002216\u0022 data-view-component=\u0022true\u0022\u003E\u003Cpath d=\u0022M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z\u0022\u003E\u003C\/path\u003E\u003Cpath d=\u0022M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z\u0022\u003E\u003C\/path\u003E\u003C\/svg\u003E\u003C\/clipboard-copy\u003E\u003C\/div\u003E\n\u003C\/div\u003E\n\u003C\/li\u003E\n\u003C\/ol\u003E\n\u003Ch2 dir=\u0022auto\u0022 tabindex=\u0022-1\u0022\u003E\u003Ca id=\u0022user-content-applying-the-mui-theme-configurations\u0022 aria-hidden=\u0022true\u0022 href=\u0022https:\/\/github.com\/zesty-io\/module-mui-styles\/blob\/main\/README.md#applying-the-mui-theme-configurations\u0022\u003E\u003Csvg viewbox=\u00220 0 16 16\u0022 version=\u00221.1\u0022 width=\u002216\u0022 height=\u002216\u0022 aria-hidden=\u0022true\u0022\u003E\u003Cpath d=\u0022m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\u0022\u003E\u003C\/path\u003E\u003C\/svg\u003E\u003C\/a\u003E\u003Cg-emoji alias=\u0022white_check_mark\u0022 fallback-src=\u0022https:\/\/github.githubassets.com\/images\/icons\/emoji\/unicode\/2705.png\u0022\u003E\u2705\u003C\/g-emoji\u003EApplying the MUI theme configurations\u003C\/h2\u003E\n\u003Col start=\u00222\u0022 dir=\u0022auto\u0022\u003E\n\u003Cli\u003EAdding MUI Theme provider\n\u003Cblockquote\u003E\n\u003Cp dir=\u0022auto\u0022\u003EIn order for the custom theme to work,\u0026nbsp;\u003Ccode\u003EThemeProvider\u003C\/code\u003E\u0026nbsp;should be imported in a component or in a top level component file.\u003C\/p\u003E\n\u003C\/blockquote\u003E\n\u003C\/li\u003E\n\u003C\/ol\u003E\n\u003Cp dir=\u0022auto\u0022\u003EImporting the MUI\u0026nbsp;\u003Ccode\u003EThemeProvider\u003C\/code\u003E\u0026nbsp;:\u003C\/p\u003E\n\u003Cdiv dir=\u0022auto\u0022\u003E\n\u003Cpre\u003Eimport { ThemeProvider } from \u0022@mui\/material\/styles\u0022;\u003C\/pre\u003E\n\u003Cdiv\u003E\u003Cclipboard-copy aria-label=\u0022Copy\u0022 data-copy-feedback=\u0022Copied!\u0022 data-tooltip-direction=\u0022w\u0022 value=\u0022import { ThemeProvider } from \u0026quot;@mui\/material\/styles\u0026quot;;\u0022 role=\u0022button\u0022 tabindex=\u00220\u0022\u003E\u003Csvg aria-hidden=\u0022true\u0022 height=\u002216\u0022 viewbox=\u00220 0 16 16\u0022 version=\u00221.1\u0022 width=\u002216\u0022 data-view-component=\u0022true\u0022\u003E\u003Cpath d=\u0022M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z\u0022\u003E\u003C\/path\u003E\u003Cpath d=\u0022M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z\u0022\u003E\u003C\/path\u003E\u003C\/svg\u003E\u003C\/clipboard-copy\u003E\u003C\/div\u003E\n\u003C\/div\u003E\n\u003Cp\u003E\u003C\/p\u003E\n\u003Cp dir=\u0022auto\u0022\u003EAfter importing, the component should be the child of the\u0026nbsp;\u003Ccode\u003EThemeProvider\u003C\/code\u003E\u0026nbsp;component and use\u0026nbsp;\u003Ccode\u003EZestyStyleVariables\u003C\/code\u003E\u0026nbsp;as the theme prop value.\u003C\/p\u003E\n\u003Cdiv dir=\u0022auto\u0022\u003E\n\u003Cpre\u003E\u0026lt;ThemeProvider theme={ZestyStyleVariables()}\u0026gt;\n  \u0026lt;Component \/\u0026gt;\n\u0026lt;\/ThemeProvider\u0026gt;\u003C\/pre\u003E\n\u003Cdiv\u003E\u003Cclipboard-copy aria-label=\u0022Copy\u0022 data-copy-feedback=\u0022Copied!\u0022 data-tooltip-direction=\u0022w\u0022 value=\u0022\u0026lt;ThemeProvider theme={ZestyStyleVariables()}\u0026gt;\n  \u0026lt;Component \/\u0026gt;\n\u0026lt;\/ThemeProvider\u0026gt;\u0022 role=\u0022button\u0022 tabindex=\u00220\u0022\u003E\u003Csvg aria-hidden=\u0022true\u0022 height=\u002216\u0022 viewbox=\u00220 0 16 16\u0022 version=\u00221.1\u0022 width=\u002216\u0022 data-view-component=\u0022true\u0022\u003E\u003Cpath d=\u0022M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z\u0022\u003E\u003C\/path\u003E\u003Cpath d=\u0022M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z\u0022\u003E\u003C\/path\u003E\u003C\/svg\u003E\u003C\/clipboard-copy\u003E\u003C\/div\u003E\n\u003C\/div\u003E\n\u003Cp\u003E\u003C\/p\u003E\n\u003Cp dir=\u0022auto\u0022\u003EAlso do not forget to import the theme configuration file\u003C\/p\u003E\n\u003Cdiv dir=\u0022auto\u0022\u003E\n\u003Cpre\u003Eimport ZestyStyleVariables from \u0022components\/ZestyStyleVariables\u0022;\u003C\/pre\u003E\n\u003Cdiv\u003E\u003Cclipboard-copy aria-label=\u0022Copy\u0022 data-copy-feedback=\u0022Copied!\u0022 data-tooltip-direction=\u0022w\u0022 value=\u0022import ZestyStyleVariables from \u0026quot;components\/ZestyStyleVariables\u0026quot;;\u0022 role=\u0022button\u0022 tabindex=\u00220\u0022\u003E\u003Csvg aria-hidden=\u0022true\u0022 height=\u002216\u0022 viewbox=\u00220 0 16 16\u0022 version=\u00221.1\u0022 width=\u002216\u0022 data-view-component=\u0022true\u0022\u003E\u003Cpath d=\u0022M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z\u0022\u003E\u003C\/path\u003E\u003Cpath d=\u0022M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z\u0022\u003E\u003C\/path\u003E\u003C\/svg\u003E\u003C\/clipboard-copy\u003E\u003C\/div\u003E\n\u003C\/div\u003E\n\u003Cp\u003E\u003C\/p\u003E\n\u003Cp dir=\u0022auto\u0022\u003EExample of adding\u0026nbsp;\u003Ccode\u003EThemeProvider\u003C\/code\u003E\u0026nbsp;in Zesty starter app\u0026nbsp;\u003Ccode\u003EApp.js\u003C\/code\u003E\u0026nbsp;file:\u003C\/p\u003E\n\u003Cdiv dir=\u0022auto\u0022\u003E\n\u003Cpre\u003Eimport ZestyStyleVariables from \u0022components\/zestyStyleVariables\u0022; \/\/Importing the custom theme config from the zestyStyleVariables.js\nimport { ThemeProvider } from \u0022@mui\/material\/styles\u0022; \/\/ importing ThemeProvider from MUI styles\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    \u0026lt;\u0026gt;\n      {\/* logic to run zesty head if it detects zesty meta data patterns in props, else load alternate head for you to edit *\/}\n      {(pageProps?.meta?.web \u0026amp;\u0026amp; \u0026lt;ZestyHead content={pageProps} \/\u0026gt;) || (\n        \u0026lt;Head\u0026gt;\n          \u0026lt;meta charSet=\u0022utf-8\u0022 \/\u0026gt;\n          \u0026lt;title\u0026gt;Zesty.io Next.js Marketing Technology Example Starter\u0026lt;\/title\u0026gt;\n        \u0026lt;\/Head\u0026gt;\n      )}\n\n      {\/* MUI customized theme will start to effect here *\/}\n      \u0026lt;ThemeProvider theme={ZestyStyleVariables()}\u0026gt;\n        \u0026lt;Component {...pageProps} \/\u0026gt;\n      \u0026lt;\/ThemeProvider\u0026gt;\n    \u0026lt;\/\u0026gt;\n  );\n}\n\nexport default MyApp;\u003C\/pre\u003E\n\u003Cdiv\u003E\u003Cclipboard-copy aria-label=\u0022Copy\u0022 data-copy-feedback=\u0022Copied!\u0022 data-tooltip-direction=\u0022w\u0022 value=\u0022import ZestyStyleVariables from \u0026quot;components\/zestyStyleVariables\u0026quot;; \/\/Importing the custom theme config from the zestyStyleVariables.js\nimport { ThemeProvider } from \u0026quot;@mui\/material\/styles\u0026quot;; \/\/ importing ThemeProvider from MUI styles\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    \u0026lt;\u0026gt;\n      {\/* logic to run zesty head if it detects zesty meta data patterns in props, else load alternate head for you to edit *\/}\n      {(pageProps?.meta?.web \u0026amp;\u0026amp; \u0026lt;ZestyHead content={pageProps} \/\u0026gt;) || (\n        \u0026lt;Head\u0026gt;\n          \u0026lt;meta charSet=\u0026quot;utf-8\u0026quot; \/\u0026gt;\n          \u0026lt;title\u0026gt;Zesty.io Next.js Marketing Technology Example Starter\u0026lt;\/title\u0026gt;\n        \u0026lt;\/Head\u0026gt;\n      )}\n\n      {\/* MUI customized theme will start to effect here *\/}\n      \u0026lt;ThemeProvider theme={ZestyStyleVariables()}\u0026gt;\n        \u0026lt;Component {...pageProps} \/\u0026gt;\n      \u0026lt;\/ThemeProvider\u0026gt;\n    \u0026lt;\/\u0026gt;\n  );\n}\n\nexport default MyApp;\u0022 role=\u0022button\u0022 tabindex=\u00220\u0022\u003E\u003Csvg aria-hidden=\u0022true\u0022 height=\u002216\u0022 viewbox=\u00220 0 16 16\u0022 version=\u00221.1\u0022 width=\u002216\u0022 data-view-component=\u0022true\u0022\u003E\u003Cpath d=\u0022M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z\u0022\u003E\u003C\/path\u003E\u003Cpath d=\u0022M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z\u0022\u003E\u003C\/path\u003E\u003C\/svg\u003E\u003C\/clipboard-copy\u003E\u003C\/div\u003E\n\u003C\/div\u003E\n\u003Ch3 dir=\u0022auto\u0022 tabindex=\u0022-1\u0022\u003E\u003Ca id=\u0022user-content--please-take-note-that-the-themeprovider-can-be-imported-exclusively-in-a-specific-component-the-example-above-is-just-a-general-scenario-to-apply-the-theme-to-the-webpage-as-a-whole\u0022 aria-hidden=\u0022true\u0022 href=\u0022https:\/\/github.com\/zesty-io\/module-mui-styles\/blob\/main\/README.md#-please-take-note-that-the-themeprovider-can-be-imported-exclusively-in-a-specific-component-the-example-above-is-just-a-general-scenario-to-apply-the-theme-to-the-webpage-as-a-whole\u0022\u003E\u003Csvg viewbox=\u00220 0 16 16\u0022 version=\u00221.1\u0022 width=\u002216\u0022 height=\u002216\u0022 aria-hidden=\u0022true\u0022\u003E\u003Cpath d=\u0022m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\u0022\u003E\u003C\/path\u003E\u003C\/svg\u003E\u003C\/a\u003E\u003Cg-emoji alias=\u0022memo\u0022 fallback-src=\u0022https:\/\/github.githubassets.com\/images\/icons\/emoji\/unicode\/1f4dd.png\u0022\u003E\ud83d\udcdd\u003C\/g-emoji\u003E\u0026nbsp;Please take note that the\u0026nbsp;\u003Ccode\u003EThemeProvider\u003C\/code\u003E\u0026nbsp;can be imported exclusively in a specific component, the example above is just a general scenario to apply the theme to the webpage as a whole.\u003C\/h3\u003E\n\u003Cp dir=\u0022auto\u0022\u003EFor more details about customizing theme, kindly see in the\u0026nbsp;\u003Ca href=\u0022https:\/\/mui.com\/material-ui\/customization\/theming\/\u0022 rel=\u0022nofollow\u0022\u003EMUI Documentation\u003C\/a\u003E.\u003C\/p\u003E\n\u003Ch3 dir=\u0022auto\u0022 tabindex=\u0022-1\u0022\u003E\u003Ca id=\u0022user-content-please-also-see-the-example-component-sink-of-the-mui-styles\u0022 aria-hidden=\u0022true\u0022 href=\u0022https:\/\/github.com\/zesty-io\/module-mui-styles\/blob\/main\/README.md#please-also-see-the-example-component-sink-of-the-mui-styles\u0022\u003E\u003Csvg viewbox=\u00220 0 16 16\u0022 version=\u00221.1\u0022 width=\u002216\u0022 height=\u002216\u0022 aria-hidden=\u0022true\u0022\u003E\u003Cpath d=\u0022m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\u0022\u003E\u003C\/path\u003E\u003C\/svg\u003E\u003C\/a\u003EPlease also see the\u0026nbsp;\u003Ca href=\u0022https:\/\/github.com\/zesty-io\/example-mui-styles\u0022\u003Eexample component sink\u003C\/a\u003E\u0026nbsp;of the MUI-Styles\u003C\/h3\u003E","tags":{"type":"relationship","model":"tags","totalItems":1,"data":[{"name":"Headless","description":null,"primary":"1","meta":{"type":"item","model_name":"tags","model_alternate_name":"Tag","zuid":"7-f2eee4bdb0-lv6cnc","createdAt":"2022-06-28 13:33:22","updatedAt":"2022-06-28 13:33:21","listed":"1","version":"2","locale":{"id":"1","name":"English (United States)","code":"en-US","default":"1","active":"1","enabled":"1"},"model":{"type":"model","zuid":"6-227b50-9qk349","name":"tags","label":"Tags","resourceURI":"https:\/\/extensions.zesty.io\/-\/instant\/6-227b50-9qk349.json"},"web":{"url":"https:\/\/extensions.zesty.io\/marketplace\/headless\/","uri":"\/marketplace\/headless\/","fragment":"headless","canonical_tag_mode":"1","sitemap_priority":"-1.0","sitemap_last_updated":"2022-06-28 13:33:21","canonical_query_param_whitelist":null,"canonical_tag_custom_value":null,"seo_link_text":"Headless","seo_meta_title":"Headless","seo_meta_description":"","seo_meta_keywords":null}}}]},"image":{"type":"images","totalItems":1,"data":[{"type":"image","zuid":"3-fc1c479-m7kwfb","url":"https:\/\/39ntbr6g.media.zestyio.com\/zesty-mui-logo.png"}]},"resource_link":null,"youtube_video_hash":null,"author":{"type":"relationship","model":"authors","totalItems":1,"data":[{"name":"Zesty.io","logo":{"type":"images","totalItems":1,"data":[{"type":"image","zuid":"3-85fa31d-tsqtk","url":"https:\/\/39ntbr6g.media.zestyio.com\/zestyio-logo2.png"}]},"website":"https:\/\/www.zesty.io","description":"Headless CMS + WebEngine","meta":{"type":"item","model_name":"authors","model_alternate_name":"Author","zuid":"7-bc8c908ec8-h39w58","createdAt":"2019-06-14 23:43:50","updatedAt":"2019-06-14 23:43:49","listed":"1","version":"1","locale":{"id":"1","name":"English (United States)","code":"en-US","default":"1","active":"1","enabled":"1"},"model":{"type":"model","zuid":"6-e5b38c-jp19kl","name":"authors","label":"Publishers","resourceURI":"https:\/\/extensions.zesty.io\/-\/instant\/6-e5b38c-jp19kl.json"},"web":{"url":"https:\/\/extensions.zesty.io\/zesty-io\/","uri":"\/zesty-io\/","fragment":"zesty-io","canonical_tag_mode":"1","sitemap_priority":"-1.0","sitemap_last_updated":"2019-06-14 23:43:49","canonical_query_param_whitelist":null,"canonical_tag_custom_value":null,"seo_link_text":"Zesty.io","seo_meta_title":"Zesty.io","seo_meta_description":"","seo_meta_keywords":null}}}]},"collections":null,"placard_image":{"type":"images","totalItems":1,"data":[{"type":"image","zuid":"3-fc1c58f-l2vc8m","url":"https:\/\/39ntbr6g.media.zestyio.com\/Material-UI-Style-Variables.png"}]},"subtitle":"Zesty styles-variables with MUI class names","white_logo":null,"app_zuid":null,"available":"1","recommended":"0","meta":{"type":"item","model_name":"extensions","model_alternate_name":"Extension","zuid":"7-9aced4eb8c-75bcss","createdAt":"2023-05-18 16:37:10","updatedAt":"2023-05-18 16:37:10","listed":"1","version":"2","locale":{"id":"1","name":"English (United States)","code":"en-US","default":"1","active":"1","enabled":"1","url":"https:\/\/extensions.zesty.io\/marketplace\/modules\/mui-style-variables\/"},"model":{"type":"model","zuid":"6-93d6f0-33zfx6","name":"extensions","label":"Entities","resourceURI":"https:\/\/extensions.zesty.io\/-\/instant\/6-93d6f0-33zfx6.json"},"availableLocales":[{"id":"1","name":"English (United States)","code":"en-US","default":"1","active":"1","enabled":"1","url":"https:\/\/extensions.zesty.io\/marketplace\/modules\/mui-style-variables\/"}],"web":{"url":"https:\/\/extensions.zesty.io\/marketplace\/modules\/mui-style-variables\/","uri":"\/marketplace\/modules\/mui-style-variables\/","fragment":"mui-style-variables","canonical_tag_mode":"1","sitemap_priority":"-1.0","sitemap_last_updated":"2023-05-18 16:37:10","canonical_query_param_whitelist":null,"canonical_tag_custom_value":null,"seo_link_text":"MUI Style Variables","seo_meta_title":"MUI Style Variables","seo_meta_description":"Zesty styles-variables with MUI class names\nThis feature will help to incorporate zesty instance style variables to Material UI Theme.\n\ud83d\udd03Running the script\nUpon","seo_meta_keywords":null}}}