Getting Custom CSS Class of a Component

Plasmic Studio Questions
1

Is there a way to get the css class of a component? I am not really sure how to go about using the Custom CSS Embed component I added to the page. How can I target, say, the Embed HTML component that is already on the page with content in it?

The docs say: “Simply define the class, and then on any element you want, apply the class there.” How do I “apply” the class?

It may be worth mentioning that my Embed HTML component is loading the html content via a data query

I see that the Embed HTML component doesn’t have the HTML Attributes section like other components. Is that intended?

2

Hi @exhaustive_panther! You can edit the code of the Embed HTML for something like:

<div class="my-class">
  ...
</div>

then you can target .my-class in your CSS. Does that work for you?

3

Yes - components in general do not have a HTML Attributes section, only tag elements.

4

I don’t think that works because the embed html components loads html as dynamic value from an Airtable query.

5

Is it possible to type in the code as you suggested and then specify where the result of the query should be inserted within that code block?

6

Since you are using a dynamic value like $ctx.airtableData , you can use instead something like: "<div class=\"my-class\">" + $ctx.airtableData + "</div>"

7

Brilliant, thanks! I managed to target it by wrapping the embed in a section for which I could specify a classname and referenced it like that.