Use custom CSS?

[donalffons]

Wow, I'm completely blown away by Plasmic. Thank you so much for this application!

I am wondering what would be the best way to apply custom CSS styles on an element. In my case, I'm having a simple button and would like to apply a "outline: none" css style, so that the thick outline goes away (which is there by default).

Plasmic doesn't seem to have UI elements to apply this type of style. What would be the best way to apply this style using CSS? It would be great if the style would also apply in Plasmic Studio. I'm using Plasmic using Codegen (NextJS) to a Github repository.

Here are a few things I've tried:

1. I tried editing the file ./components/plasmic/testpage/TestComponent.module.css locally and pushing the changes to the git repository. That didn't work and lead to a merge conflict on the next "pubish".
2. I added my custom style inside the ./styles/globals.css file. The style update is reflected in the deployed version, but not inside Plasmic Studio.

[yang]

Thank you for the kind words!

You in fact clear this outline, though it's not easy to discover:

1. Select the button.
2. In Element States, select Focus.

(Video: https://youtu.be/1F3Fp33LAXM)

That's actually it, you don't need to change anything about the Focus state. By default, buttons have an outline, but when you set a Focus state, it clears out the default outline. (And then if you want, you can use shadows to add your own outline.)

---

As for setting custom CSS, the way to do this would be via code overrides (as opposed to editing the files in plasmic/, which are owned by Plasmic):

// With codegen, edit Button.tsx:
function Button(props) {
  return <PlasmicButton {...props} root={{style: {transform: 'rotate(90deg)'}}} />;
}

// With PlasmicLoader, add a Button substitution:
function Button(props) {
  return <PlasmicLoader component="Button" componentProps={{root: {style: {position: 'sticky'}}}} />;
}
// Learn about substitutions: https://docs.plasmic.app/learn/loader-components/#component-substitution

The docs on overrides are here: https://docs.plasmic.app/learn/overrides/#codegen. Or you can check out your project-specific interactive API docs by pressing the "Code" button in your project's toolbar.

LMK if this helps!

[donalffons]

Works! :rocket: Thanks a lot for the help. That makes it clear.

So, I understand that I can change the code of the wrapper components and override arbitrary props of all nested components using code... And by doing that I can implement custom logic, "unusual" styling or anything else that Plasmic Studio is not built for. Sounds fantastic :slightly_smiling_face:.