Yes. Built-in components such as PianoPrimaryButton accept a class attribute that lets you attach your own class name directly to the rendered element. You can then target that class in the template's CSS tab to override the component's default styles — no !important required.
How It Works
By default, built-in components render with internal class names that are difficult to target reliably. Instead of trying to override those, pass your own class through the class attribute on the component. The element renders with your class applied alongside the component's defaults, so your CSS rule wins by virtue of specificity and source order — not by !important.
Example
Default — blue button rendered by the component:
<div class="pn-term-actions">
<PianoPrimaryButton
width="200px"
onClick={(e) => context.startCheckout({ term: item })}
externalEventName={`offer-subscribe-${index()}`}
>
{context.getButtonText(item)}
</PianoPrimaryButton>
</div>
Override — add a custom class to the component:
<div class="pn-term-actions">
<PianoPrimaryButton
width="200px"
class="test-class"
onClick={(e) => context.startCheckout({ term: item })}
externalEventName={`offer-subscribe-${index()}`}
>
{context.getButtonText(item)}
</PianoPrimaryButton>
</div>
Then define the class in the CSS tab:
.test-class {
background-color: aqua;
}
The button will render with an aqua background instead of the default blue.
Key Points
-
Pass your own class via the
classattribute on the component — don't try to target the component's internal auto-generated classes. -
Define the class in the template's CSS tab, alongside any other custom styles for the template.
-
No
!importantis required — your custom class rules resolve cleanly against the component defaults. -
This pattern works for other built-in components as well, not just
PianoPrimaryButton. Wherever a component accepts aclassattribute, you can use the same approach to override its styling.