How to reference a component to apply custom CSS

campopianoa · February 21, 2020, 11:42pm

Try Anvil Roles.

Docs here:
https://anvil.works/docs/client/themes-and-styling

Clone app:
https://anvil.works/build#clone:XJ3UMT7S77FHW3MU=QWBWPALKR6AZFFNX245VGBJE

You will want to create a new role and give it a name. As you can see below, I’ve called it “link_role”:

Then, in your theme.css (under “Assets”) you can reference that role by prepending “.anvil-role-” to your role name. For this example you would use .anvil-role-link_role. Add the rest of your desired CSS styling, assign the new role to your link in the IDE, and you’re good to go!

Here is the CSS in my theme.css that is associated with my new role:

.anvil-role-link_role:hover {
  color: hotpink;
}

In the designer, I’ve set my link to my new role:

I hope this helps!