https://github.com/zesty-io/example-mui-styles
https://github.com/zesty-io/example-mui-styles
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/zesty-io/example-mui-styles
- Owner: zesty-io
- License: unlicense
- Created: 2023-05-02T15:21:43.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-27T17:13:45.000Z (about 3 years ago)
- Last Synced: 2025-10-10T17:12:25.108Z (10 months ago)
- Language: JavaScript
- Size: 255 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Material UI Styles Examples
This nextjs app contains the Material UI component examples which makes use of the style variables fetched from a Zesty instance.
This 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.
## Theme colors:
`Primary` = $\color{#0d6efd}{\textsf{brand-primary}}$
`Secondary` = $\color{#6c757d}{\textsf{brand-secondary}}$
`Success` = $\color{#198754}{\textsf{brand-success}}$
`Info` = $\color{#0dcaf0}{\textsf{brand-info}}$
`Warning` = $\color{#ffc107}{\textsf{brand-warning}}$
`Error` = $\color{#dc3545}{\textsf{brand-error}}$
Using [`sx`](https://mui.com/system/getting-started/the-sx-prop/) prop to apply theme color
```javascript
Hello World
```
Applying theme color directly to [`color`](https://mui.com/material-ui/customization/color/) prop
```javascript
Hello World
```
Applying theme colors to a [Typography](https://mui.com/material-ui/api/typography/) component with header variant
```javascript
{" "}
Hello World{" "}
```
[Button](https://mui.com/material-ui/react-button/) component with theme colors
```javascript
{" "}
Primary{" "}
```
## Deploying
This example makes use of GCP's App Engine service. You can use any solution you would like to host your app build.
1. Setup a new App Engine service.
2. Run your app build then deploy to your AE service.
3. Copy the generated app URL.
## Setup proxy settings in Zesty
1. 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.
- Use Zesty's Instance API [Create Setting](https://instances-api.zesty.org/#56267a59-88a5-40b0-bd1c-a23de605a6e4) endpoint
- 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.
- 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.
Dev / Stage
```json
{
"category": "proxy",
"keyFriendly": "Proxy Dev URL",
"key": "dev",
"value": "YOUR BUCKET URL",
"admin": false,
"parselyAccess": false,
"dataType": "text",
"options": null,
"tips": "Root URL to proxy file store"
}
```
Live
```json
{
"category": "proxy",
"keyFriendly": "Proxy Live URL",
"key": "live",
"value": "YOUR BUCKET URL",
"admin": false,
"parselyAccess": false,
"dataType": "text",
"options": null,
"tips": "Root URL to proxy file store"
}
```
We can now see the proxy settings in the instance.
- Once the proxy settings is created and the url values are added, Webengine will map the proxy URLs to both environments (Stage and Live).
- 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).