A gatsby theme/plugin that uses Joy UI under the hood with customized components to work seamlessly with Gatsby!
npm install gatsby-theme-joy-uiA joy-ui gatsby theme plugin with plug and play functionality. Simply install this plugin to your gatsby project and you are ready to go.
For far too long, there have been themes that just require you to figure it out yourself. gatsby-theme-joy-ui is designed to help alleviate those concerns and has been carefully crafted to help beginners with Gatsby & Joy-UI
1. Install gatsby-theme-joy-ui with npm or yarn within your gatsby site alongside of @mui/joy
``bash`
npm install gatsby-theme-joy-ui @mui/joy
2. Configure your theme within the gatsby-config(.js|.ts) file of your project
`javascriptgatsby-theme-joy-ui
//gatsby-config.js
module.exports = {
plugins: {
resolve: ,`
options: {
//configure your options here. Leave blank if there are none
//webFontsConfig:{}
//emotionPluginConfig:{}
},
},
};
Note: If you do not know how to configure theme options, refer to this guide -> theme-api congiuration
1. Refer to gatsby-plugin-webfonts for up to date configuration options
2. Create your custom font configuration within the gatsby-theme-joy-ui.webFontsConfig configuration property in gatsby-config.js
Example:
`javascriptRoboto
webFontsConfig:{
fonts: {
google: [
{
family: , // your font name here300
variants: [, 400, 500],`
},
],
},
}
1. Refer to gatsby-plugin-emotion for up to date configuration options
2. Create your custom emotion configuration within the gatsby-theme-joy-ui.emotionPluginConfig configuration property in gatsby-config.js
Example:
`javascript@emotion/babel-plugin
emotionPluginConfig:{
// Accepts the following options, all of which are defined by plugin.[local]
// The values for each key in this example are the defaults the plugin uses.
sourceMap: true,
autoLabel: "dev-only",
labelFormat: ,
cssPropOptimization: true,
}
`
Contributions are always welcome!
See contributing.md for ways to get started.
Please adhere to this project's code of conduct.
To run tests, run the following command
`bash``
npm run test
If you see any issues such as missing features/bugs, please refer to gatsby-joy-ui-theme's issue page
- gatsby-theme-material-ui
- Awesome README
- @trentschnee https://www.github.com/trentschnee | https://www.linkedin.com/in/trentschnee/))