AEM forms basic theme overriding other parts of site

[Hina29]

When i include a form on a page its button:not()  theme.css is overriding  styles defined by classes on other button components on the page

theme.css

button:not(.af-icon-button)input[type='button']{

//styles here

}

custom.css

.xyz{

}

What should i do to get the style on button class xyz

Thanks

Hina

[smacdonald2008]

WHy not put your CSS applicable to the Form in its own ClientLib - then it will not impact other parts of the site.

[Hina29]

I am using the default theme.css for the form component. When this component is dragged on a page that contains other components having button. It overrides there styles.

[smacdonald2008]

Try putting the CSS into a  separate clientlib that will not impact other parts of the site. That is only used in the form where you want that specific style.

[notyourcat]

This is still a relevant topic for AEM Forms. I'm guessing not that many people use it because its pretty evident. When the guideContainer is loaded, the common clientlib gets loaded, adding reset and overrides for things like inputs, buttons and containers, which is ok, if you only have AEM forms on your page, but usually there are things like headers and megamenus and container, which will get affected. 

I'm still yet to find a way to NOT include this clientlibrary but haven't been able to, and a solution such as "Add more styles in another separate clientlib (?)" its not feasible and a waste of developers time.

Any other suggestions?