{"id":24440673,"url":"https://github.com/icculusc/fusion-plugin-material-ui","last_synced_at":"2025-10-01T10:30:53.736Z","repository":{"id":32917371,"uuid":"145751909","full_name":"IcculusC/fusion-plugin-material-ui","owner":"IcculusC","description":"material-ui support for https://fusionjs.com","archived":false,"fork":false,"pushed_at":"2023-01-04T21:51:28.000Z","size":1102,"stargazers_count":7,"open_issues_count":15,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-22T00:50:34.875Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/fusion-plugin-material-ui","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IcculusC.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}},"created_at":"2018-08-22T19:12:10.000Z","updated_at":"2023-07-19T13:54:45.000Z","dependencies_parsed_at":"2023-01-14T22:45:52.193Z","dependency_job_id":null,"html_url":"https://github.com/IcculusC/fusion-plugin-material-ui","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IcculusC%2Ffusion-plugin-material-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IcculusC%2Ffusion-plugin-material-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IcculusC%2Ffusion-plugin-material-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IcculusC%2Ffusion-plugin-material-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IcculusC","download_url":"https://codeload.github.com/IcculusC/fusion-plugin-material-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234856223,"owners_count":18897403,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-01-20T20:56:59.334Z","updated_at":"2025-10-01T10:30:53.409Z","avatar_url":"https://github.com/IcculusC.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# fusion-plugin-material-ui\n\nThis plugin will provide drop in support for \"just works\" server side rendering [`material-ui`](https://material-ui.com/) components.\n\n---\n\n### Table of contents\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Setup](#setup)\n* [API](#api)\n  * [Registration API](#registration-api)\n  * [Dependencies](#dependencies)\n* [Advanced Usage](#advancedusage)\n\n---\n\n### Installation\n\n```js\nyarn add fusion-plugin-material-ui\n```\n\n### Usage\n\n```js\n// ButtonWrap.js\nimport React from 'react';\nimport Button from '@material-ui/core/Button';\n\nexport ButtonWrap = () =\u003e (\n  \u003cButton\n    variant=\"contained\"\n    color=\"primary\"\n  \u003e\n    with bacon\n  \u003c/Button\u003e\n)\n```\n\n### Setup\n\n#### The Basic\n\n```js\n// main.js\nimport React from 'react';\nimport App from 'fusion-react';\n\nimport MuiThemeProvider, {\n  MuiThemeProviderToken,\n} from 'fusion-plugin-material-ui';\n\nexport default () =\u003e {\n  const app = new App(root);\n  // will use the default theme\n  app.register(MuiThemeProviderToken, MuiThemeProvider);\n  return app;\n};\n```\n\n#### Custom Theme\n\n[https://material-ui.com/customization/themes/](https://material-ui.com/customization/themes/)\n\n```js\n// main.js\nimport React from 'react';\nimport App from 'fusion-react';\n\nimport MuiThemeProvider, {\n  MuiThemeProviderToken,\n  MuiThemeToken,\n} from 'fusion-plugin-material-ui';\nimport {createMuiTheme} from '@material-ui/core/styles';\n\nexport default () =\u003e {\n  const app = new App(root);\n  app.register(MuiThemeToken, createMuiTheme({fooColor: '#ba4'}));\n  app.register(MuiThemeProviderToken, MuiThemeProvider);\n  return app;\n};\n```\n\n### API\n\n#### Registration API\n\n##### `MuiThemeProvider`\n\n```js\nimport MuiThemeProvider from 'fusion-plugin-material-ui';\n```\n\nAdds the `MuiThemeProvider` from `@material-ui/core` and handles server side rendering. Typically registered with [`MuiThemeProviderToken`](#muithemeprovidertoken)\n\n##### `MuiThemeProviderToken`\n\n```js\nimport {MuiThemeProviderToken} from 'fusion-plugin-material-ui';\n```\n\nTypicall registered with [`MuiThemeProvider`](#muithemeprovider)\n\n#### Dependencies\n\n##### `MuiThemeToken`\n\n```js\nimport {MuiThemeToken} from 'fusion-plugin-material-ui';\n```\n\nRegister with your own custom `material-ui` theme.\nOptional\n\n##### `JssToken`\n\n```js\nimport {JssToken} from 'fusion-plugin-material-ui';\n```\n\nRegister with your own custom [`jss`](https://cssinjs.org) instance.\nOptional\n\u0026nbsp;\n\n\u0026nbsp;\n\n\u0026nbsp;\n\n\u0026nbsp;\n\n\u0026nbsp;\n\n### Advanced Usage\n\n#### Custom JSS instance\n\nThis requires management of a custom [`jss`](https://cssinjs.org) instance.\n\n[https://material-ui.com/customization/css-in-js/](https://material-ui.com/customization/css-in-js/)\n\n```js\n// main.js\nimport React from 'react';\nimport App from 'fusion-react';\n\nimport {create} from 'jss';\nimport MuiThemeProvider, {\n  JssToken,\n  MuiThemeProviderToken,\n} from 'fusion-plugin-material-ui';\n\nexport default () =\u003e {\n  const app = new App(root);\n\n  app.register(JssToken, create());\n  app.register(MuiThemeProviderToken, MuiThemeProvider);\n  return app;\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficculusc%2Ffusion-plugin-material-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ficculusc%2Ffusion-plugin-material-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficculusc%2Ffusion-plugin-material-ui/lists"}