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?

score 1 · Accepted Answer · answered Mar 17 '23 at 08:13

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;
}

answered Mar 17 '23 at 08:13

ABGR

score 0 · Answer 2 · answered Mar 17 '23 at 07:57

0

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

answered Mar 17 '23 at 07:57

Sahil Markana

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 22 '23 at 13:20

2 Answers2