{"id":28273081,"url":"https://github.com/zesty-io/example-mui-styles","last_synced_at":"2026-02-17T16:01:30.802Z","repository":{"id":163178894,"uuid":"635384401","full_name":"zesty-io/example-mui-styles","owner":"zesty-io","description":null,"archived":false,"fork":false,"pushed_at":"2023-06-27T17:13:45.000Z","size":261,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-10-10T17:12:25.108Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zesty-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-05-02T15:21:43.000Z","updated_at":"2023-06-27T16:55:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"1316dd9b-6135-4901-92c9-421e3a8c028f","html_url":"https://github.com/zesty-io/example-mui-styles","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zesty-io/example-mui-styles","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zesty-io%2Fexample-mui-styles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zesty-io%2Fexample-mui-styles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zesty-io%2Fexample-mui-styles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zesty-io%2Fexample-mui-styles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zesty-io","download_url":"https://codeload.github.com/zesty-io/example-mui-styles/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zesty-io%2Fexample-mui-styles/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29549205,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-17T14:33:00.708Z","status":"ssl_error","status_checked_at":"2026-02-17T14:32:58.657Z","response_time":100,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-21T00:17:16.822Z","updated_at":"2026-02-17T16:01:30.797Z","avatar_url":"https://github.com/zesty-io.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Material UI Styles Examples\n\nThis nextjs app contains the Material UI component examples which makes use of the style variables fetched from a Zesty instance.\n\nThis example uses the [MUI style settings module](https://github.com/zesty-io/module-mui-styles). After the module has been installed to your instance, you can make use of the style variables imported and edited within the Manager interface.\n\n## Theme colors:\n\n`Primary` = $\\color{#0d6efd}{\\textsf{brand-primary}}$ \u003cbr\u003e\n`Secondary` = $\\color{#6c757d}{\\textsf{brand-secondary}}$ \u003cbr\u003e\n`Success` = $\\color{#198754}{\\textsf{brand-success}}$ \u003cbr\u003e\n`Info` = $\\color{#0dcaf0}{\\textsf{brand-info}}$ \u003cbr\u003e\n`Warning` = $\\color{#ffc107}{\\textsf{brand-warning}}$ \u003cbr\u003e\n`Error` = $\\color{#dc3545}{\\textsf{brand-error}}$ \u003cbr\u003e\n\nUsing [`sx`](https://mui.com/system/getting-started/the-sx-prop/) prop to apply theme color\n\n```javascript\n\u003cTypography sx={{ color: \"primary.main\" }}\u003e Hello World \u003c/Typography\u003e\n```\n\nApplying theme color directly to [`color`](https://mui.com/material-ui/customization/color/) prop\n\n```javascript\n\u003cTypography color=\"primary.main\"\u003e Hello World \u003c/Typography\u003e\n```\n\nApplying theme colors to a [Typography](https://mui.com/material-ui/api/typography/) component with header variant\n\n```javascript\n\u003cTypography variant=\"h1\" color=\"primary.main\"\u003e\n  {\" \"}\n  Hello World{\" \"}\n\u003c/Typography\u003e\n```\n\n[Button](https://mui.com/material-ui/react-button/) component with theme colors\n\n```javascript\n\u003cButton variant=\"contained\" color=\"success\"\u003e\n  {\" \"}\n  Primary{\" \"}\n\u003c/Button\u003e\n```\n\n## Deploying\n\nThis example makes use of GCP's App Engine service. You can use any solution you would like to host your app build.\n\n1. Setup a new App Engine service.\n2. Run your app build then deploy to your AE service.\n3. Copy the generated app URL.\n\n## Setup proxy settings in Zesty\n\n1.  In your instance settings, check that you have proxy settings installed. The below screenshot shows that this instance does not have the settings installed. We will now walk through the installation process.\n    ![image](https://github.com/b-estevez/example-mui-styles/assets/55866499/3dd79464-317b-4c73-8db9-f594c763f2a7)\n\n- Use Zesty's Instance API [Create Setting](https://instances-api.zesty.org/#56267a59-88a5-40b0-bd1c-a23de605a6e4) endpoint\n- Note that you will need to be [authenticated](https://auth-api.zesty.org/#28b40e26-196b-4283-a483-40a5b537bc22) and you will need to use your instance's ZUID (begins with an 8- ) to make this request.\n- The following request payoloads are used to create settings for both live and stage. Be sure to replace the value object with your app's hosted URL.\n\nDev / Stage\n\n```json\n{\n  \"category\": \"proxy\",\n  \"keyFriendly\": \"Proxy Dev URL\",\n  \"key\": \"dev\",\n  \"value\": \"YOUR BUCKET URL\",\n  \"admin\": false,\n  \"parselyAccess\": false,\n  \"dataType\": \"text\",\n  \"options\": null,\n  \"tips\": \"Root URL to proxy file store\"\n}\n```\n\nLive\n\n```json\n{\n  \"category\": \"proxy\",\n  \"keyFriendly\": \"Proxy Live URL\",\n  \"key\": \"live\",\n  \"value\": \"YOUR BUCKET URL\",\n  \"admin\": false,\n  \"parselyAccess\": false,\n  \"dataType\": \"text\",\n  \"options\": null,\n  \"tips\": \"Root URL to proxy file store\"\n}\n```\n\nWe can now see the proxy settings in the instance. \u003cbr\u003e\n![image](https://github.com/b-estevez/example-mui-styles/assets/55866499/2ea66ac0-c41d-42a2-b8f9-965e23ca295d)\n\n- Once the proxy settings is created and the url values are added, Webengine will map the proxy URLs to both environments (Stage and Live).\n- You can now use your instance's configured domains to view your app's content. More on proxying content can be found [here](https://zesty.org/services/web-engine/file-proxy).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzesty-io%2Fexample-mui-styles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzesty-io%2Fexample-mui-styles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzesty-io%2Fexample-mui-styles/lists"}