Styling

Every rendered LilyPond block receives a lilypond class on its root element — an <svg> for SVG output or an <img> for PNG output. Use this class as your CSS hook.

Global styles

Target .lilypond in any global stylesheet:

.lilypond {
  color: navy;
  background: ivory;
}

By default, LilyPond SVGs use currentColor, so the color property controls the notation colour and inherits from the surrounding text if unset.

Scoped styles

Pass a class prop to <LilyPond> to get a scoped handle.

---
import LilyPond from "astro-lilypond/component";
import score from "../scores/example.ly";
---

<LilyPond content={score} class="score" />

<style>
  .score {
    color: darkred;
    background: antiquewhite;
  }
</style>