globalVariants not being applied?

Developer Support
1

Greetings,

I am trying to apply site themes using the localization tutorial as an example. However, setting the globalVariants prop on my PlasmicRootProvider doesn’t appear to set the theme as I would expect. Thinking that maybe my project was misconfigured, I started fresh and went as simple as possible. Unfortunately, I got the same results. Here’s what I did:

  1. Create a new plasmic workspace with a default, red, and blue theme:

    image
    image1118×929 64.4 KB

  2. Use npx create-plasmic-app@latest to create a bare-bones React boiler plate on my project.

  3. Add in a plasmic-init.ts file with my connection info as provided by plasmic.

  4. Replace the boiler plate App.cs with the following:

import {
  PlasmicRootProvider,
  PlasmicComponent,
} from "@plasmicapp/loader-react";
import { PLASMIC } from "./plasmic-init";


function App() {
  return (<PlasmicRootProvider
    loader={PLASMIC}
    globalVariants={[
      {name: "theme", value: "red"}
    ]
    }
  >
    <PlasmicComponent component="/" />
  </PlasmicRootProvider>);
}

export default App;
  1. Run npm run start and visit page with default theme applied (expecting red theme).

I noticed the boiler plate react app appears to use codegen, so I tried setting the theme using the codegen version of the components:


import Homepage from './components/Homepage';
import {ThemeContext, ThemeValue} from './components/plasmic/website_starter/PlasmicGlobalVariant__Theme';


function App() {
  return (
  <ThemeContext.Provider value="red"><Homepage /></ThemeContext.Provider>
);
}

export default App;

The codegen works just as expected. This makes me think that perhaps I should be using something other than PlasmicRootProvider to set my globalVariants?

Thanks for any help provided,
Adam

2

Global contexts must be registered, so you must have an app host set up first.

If all goes right, you should see an entry for the global context in the Project Settings left panel.

3

Jason,

Thanks for the reply. I worked through the links that you provided and see the results in the code, but I’m not sure that this yields my expected results.

I now see a ThemeGlobalContext that I adapted from the example code in my Plasmic app’s Project Settings. Dynamically binding the current value for this setting in a text box, I do indeed see that it’s the theme value that I set in my code. However, I don’t really see a way to connect this value to my globalVariant’s theme property. Am I missing a step that connects the two?

Taking a step back, it would seems as though using Global Contexts is a way to expose my application’s state to Plasmic components. But really, all I want to do is tell Plasmic which of its own states to use. For example, just as I can send props to my Plasmic components from my code (e.g. <myPasmicComponent propValue="someValue" />, shouldn’t I be able to specify globalVariants in a similar manner?

Thanks,
Adam

4

Hey Adam, sorry I totally misread your original post. For reference, the correct docs on this are here: Other generated assets | Learn Plasmic

For loader, the globalVariants prop should be correct… maybe we could do a quick call to do some debugging?

5

Follow-up for future reference (Thanks @jason):

Plasmic upcases globalVariant names on the React side. So, even though the name of my global variant in the Plasmic designer is theme, It needed to be Theme on the React side. I’m still running into an issue getting the variable to apply to shared components and will write an additional follow-up when that is working as expected.

2 Likes