Use custom CSS? about plasmic HOT 2 CLOSED

Works! 🚀
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 🙂.

from plasmic.

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!

from plasmic.