Styling Properties in Anvil Editor Override Role Even with additional CSS properties

Anvil Q&A
1

I noticed while creating some roles for a button, that setting the background/foreground color properties in the Anvil IDE override those properties in my role. I think that’s probably intended for good reason, but what I also noticed is that if I added the :hover bit to my role, the color I selected in the Editor was still overriding my CSS.

Is that intended? I would expect that special CSS properties for events like hover would take precedence over what’s set in the IDE.

1 Like
2

I’m not an expert with CSS and I don’t know what’s going on under the hood.

But when I have similar problems I try to solve them by adding !important after the rule. If you do that too many times you create an unmanageable stylesheet, but for the little editing I do it’s usually good enough.

1 Like
3

While !important tag is bad in the long run, since Anvil roles are specially made for a particular group of components, I think it’s okay to use them at times.

Also, sometimes you can make the CSS properties work without using the !important tag. Take a look at this post Custom CSS Role for TextBox not working

1 Like
4

Hmm, I don’t think it was the fact that my styling wasn’t at the bottom of the theme sheet because that’s where it was. Also, my CSS was spot on and I know that because once I cleared out the background and foreground fields (those were the only styling bits I was concerned with) in the IDE, my hover CSS worked.

I was able to work around the IDE not being an option by just having a vanilla role CSS section, but that just makes that functionality moot, which is not great to have to set both base styling and event-based styling like hover in theme.css rather than set the former in the IDE and the latter in the role.

1 Like