Setting default stylings for CodeComponents input element.

Plasmic Studio Questions
1

Hello everyone!
I ahjve a question about CodeComponents…. I’m implementing one that has an input and a button, and I’d like to set some default stylings to those 2 elements, but then enable the user to define custom styles,… for the custom styles I’m doing something like:

zipInputClassName: {
      type: "class",
      displayName: "Input Stylings",
      hidden: isListingsType,
      styleSections: [
        "background",
        "border",
        "layout",
        "sizing",
        "spacing",
        "typography",
        "visibility",
      ],
      selectors: [
        {
          selector: ":hover",
          label: "Hovered",
        },
        {
          selector: ":focus",
          label: "Focused",
        },
      ],
    },

on the registration of the componente, but I can’t quite figure out how to provide default stylings,… cause from the doc and the IDE the defaultStyles props at the root of the CodeComponentMeta is only CSSProperties map that applies to the general code component, and I’m not sure how to define the ones for the input only

2

Ah you’re right, we don’t support specifying default styles for class props at the moment, though that would be nice :thinking_face:

3

mmm ok… gotcha so there is no walkaround to provide default stylings to pieces of a CodeComponent right now… ok!

4

and what are the actual ways to style a CodeComponent tree?

5

just add some inline css in the markup or what?

6

Yeah you can add style them directly on code and let the user override the styles from Plasmic

7

mm ok

8

will try that out

9

txs

10

but yeah, probably default stylings for class props would be awesome

11

so I have a specificity issue where the default stylings will override the actual custom class props… do you have an example of this working somewhere?

12

right; you’ll have to also provide the default styling via css classes instead of using style

13

yeah, not using styles, I have a globals.css with this piece

.delty-wrapper button:disabled {
    @apply bg-gray-50;
  }

and I just added delty-wrapper to the component like this:

<div className={`delty-wrapper ${props.className}`}>{renderType()}</div>
14

I have set custom stylings on the button inside the wrapper but they gert override (the background) in favor of the default one

15

ah I see, the selector will be higher specificity because of the .delty-wrapper. You could try :where(.delty-wrapper button:disabled) instead, to ensure you have zero specificity

16

will try that! thanks