How to prevent Nextcloud global styles from affecting custom app UI?

Hi everyone,

I’m building a custom app within the Nextcloud environment and I want to apply my own styles and themes for UI components. The issue I’m facing is that Nextcloud’s global CSS seems to override or interfere with my styles.

For example, when rendering a simple input field, my custom styles are applied, but additional borders and styles from Nextcloud are also showing up. I inspected the source and found that these styles are coming from core/css/inputs.scss in the Nextcloud core. It seems like the global styles are targeting standard HTML elements like <input>, which affects everything across all apps.

This isn’t just limited to inputs—many other elements are also picking up unwanted styles from the global CSS. I’m trying to find a way to isolate my app’s styles from the rest of the Nextcloud environment, ideally without having to constantly override or reset everything element by element.

Is there a recommended way to scope or isolate styles in a Nextcloud app so they don’t inherit from the global Nextcloud styles?

image

Hey!

I am not aware of a recommended way. If you really want to reset all NC styles (I doubt this is a good idea in general!), put your app in a div with a unique id attached (within the app and the boundary).

Then, you can use the all special property with a catch all rule to reset everything:

#my-app * {
  all: revert;
}

Chris