How can I change the CSS for pages?

[hellwaiver]

Hi, I keep trying to change the CSS properties for pages so that they do not appear to be a continuous page. My setup is pretty simple. I have a component like so:

<VuePdfEmbed ref="pdfRef" :source="pdfBuffer"></VuePdfEmbed>
But it seems like no matter what class selectors I pick.

Eg:

.vue-pdf-embed canvas {
  background-color: red !important;
  margin: 50px !important;
}

.vue-pdf-embed > div {
  background-color: red !important;
  margin: 50px !important;
}

The viewer doesnt change, seems like the CSS is overwritten. Help!

[hrynko]

Hi @hellwaiver,

Could you prepare a demo environment? Usually, setting .vue-pdf-embed > div { margin-bottom: ...; } should be enough.

[hellwaiver]

My bad, my CSS was scoped to the component. Moved it to the global script and it’s working fine. Sorry!