Hi, I’m currently migrating a nextjs application to use Plasmic as part of my evaluation of the platform. All of our applications are MUI based and we are using MUI themes.
Are there any guides on how we can manage MUI themes in Plasmic?
Also, I noticed that I have to restart my local nextjs dev server to display text that I updated in the editor. Is this the normal behaviour? It’s just that I noticed that with the competitor product, it updates as soon as I change it. Note that I have set the revalidate to 1.
Hi @fit_reindeer - typically MUI themes are managed outside of Plasmic, since they are rarely updated after being set. You would just have the theme provided globally for your application in something like Next’s _app.js, and then all MUI components—whether they’re directly used in your codebase or used in Plasmic—will be themed appropriately.
(But if you actually are looking to enable content creators to design many different MUI themes, can help provide an example of how to build a MUI theme editor within Plasmic)
You should not have to restart your dev server to display updates from the editor, but you do currently need to reload your browser tab. Are you seeing this with a brand-new create-plasmic-app as well? Trying to isolate to if it’s specific to your current codebase/integration.
Hi @yang, thanks for the response. Can you please provide the example ? Our goal is to migrate our app to a Visual Builder (either Plasmic or your competitor). And then, we need the created app to be white labeled.
I think what I just need is an entry in the CMS with the theme values in it. This should be queried by the next js application so the retrieved values (e.g paletter colors) can be assigned to the MUI theme during runtime.
Hi @fit_reindeer, this should do it - assuming you have a model called themeInputs with just a single entry, containing color fields like dangerColor:
export async function getStaticProps() {
const modelId = 'themeInputs';
// get some colors from plasmic cms
const response = await fetch(`<https://studio.plasmic.app/api/v1/cms/databases/${CMS_ID}/tables/${modelId}/query>`, {
headers: {
// Your CMS ID and CMS Public API token
'x-plasmic-api-cms-tokens': `${CMS_ID}:${CMS_PUBLIC_TOKEN}`
}
});
const parsedResponse = await response.json();
const [themeInputs] = parsedResponse.rows;
return {props: {themeInputs}}
}
export default function Page({themeInputs}) {
// use the colors
const theme = createTheme({
status: { danger: themeInputs.dangerColor }
});
return <ThemeProvider theme={theme}>...</ThemProvider>
}
References: