How to override CSS in apostrophe-cms pro in TheAposPallete.vue

Question

I'm new to apostrophe-pro and in node_modules I can see a file TheAposPallete.vue which can be located at

\node_modules@apostrophecms-pro\palette\ui\apos\components

This file has following CSS:

  .apos-palette__grouped.is-open .apos-palette__grouped__schema {
      max-height: 100vh;
   }

I want to override this since this is causing some issues. I tried overriding this in index.scss through important flag. But that didn't work.

Is there a way we can override this or is this even overridable?

Answer 1

Got it resolved by overriding the complete path in index.scss

.apos-palette__grouped.is-open .apos-palette__grouped__schema{
   max-height: 120vh !important;
}

Answer 2

add your style in direct in HTML inline CSS and declared it as !important