Reference native Grafana css classes?

[astro-manny]

Hello, I'm new to Grafana and this amazing plugin.
Can I reference Grafana css classes by their name in my html elements, without having to copy their definition in the css block?
I searched this Q&A with the keywords "css", "reference", and "css class", without much guidance...

[ZuperZee]

You can add all the styleSheets to the htmlNode

onInit

for (const sheet of document.styleSheets) {
  const constructedSheet = new CSSStyleSheet()
  for (const rule of sheet.cssRules) {
    constructedSheet.insertRule(rule.cssText);
  }
  htmlNode.adoptedStyleSheets.push(constructedSheet)
}

Example dashboard

{
  "annotations": {
    "list": [
      {
        "builtIn": 1,
        "datasource": {
          "type": "grafana",
          "uid": "-- Grafana --"
        },
        "enable": true,
        "hide": true,
        "iconColor": "rgba(0, 211, 255, 1)",
        "name": "Annotations & Alerts",
        "target": {
          "limit": 100,
          "matchAny": false,
          "tags": [],
          "type": "dashboard"
        },
        "type": "dashboard"
      }
    ]
  },
  "editable": true,
  "fiscalYearStartMonth": 0,
  "graphTooltip": 0,
  "id": 44,
  "links": [],
  "liveNow": false,
  "panels": [
    {
      "datasource": {
        "type": "datasource",
        "uid": "grafana"
      },
      "fieldConfig": {
        "defaults": {
          "color": {
            "mode": "thresholds"
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              },
              {
                "color": "red",
                "value": 80
              }
            ]
          }
        },
        "overrides": []
      },
      "gridPos": {
        "h": 9,
        "w": 12,
        "x": 0,
        "y": 0
      },
      "id": 2,
      "options": {
        "SVGBaseFix": true,
        "add100Percentage": true,
        "calcsMutation": "standard",
        "centerAlignContent": true,
        "codeData": "{\n  \"text\": \"Random text\"\n}",
        "css": "* {\n  font-family: Open Sans;\n}\n",
        "dynamicData": false,
        "dynamicFieldDisplayValues": false,
        "dynamicHtmlGraphics": false,
        "dynamicProps": false,
        "html": "<div>\n  <button class=\"css-b2ba3d-button\">Hello</button>\n</div>",
        "onInit": "const btn = htmlNode.querySelector(\"button\");\n\nfor (const sheet of document.styleSheets) {\n  const constructedSheet = new CSSStyleSheet()\n  for (const rule of sheet.cssRules) {\n    constructedSheet.insertRule(rule.cssText);\n  }\n  htmlNode.adoptedStyleSheets.push(constructedSheet)\n}\n",
        "onInitOnResize": false,
        "onRender": "",
        "overflow": "visible",
        "panelupdateOnMount": true,
        "reduceOptions": {
          "calcs": [
            "lastNotNull",
            "last",
            "firstNotNull",
            "first",
            "min",
            "max",
            "mean",
            "sum",
            "count",
            "range",
            "delta",
            "step",
            "diff",
            "logmin",
            "allIsZero",
            "allIsNull",
            "diffperc"
          ]
        },
        "renderOnMount": true,
        "rootCSS": "",
        "useGrafanaScrollbar": true
      },
      "title": "Panel Title",
      "type": "gapit-htmlgraphics-panel"
    }
  ],
  "refresh": "",
  "revision": 1,
  "schemaVersion": 38,
  "style": "dark",
  "tags": [],
  "templating": {
    "list": []
  },
  "time": {
    "from": "now-6h",
    "to": "now"
  },
  "timepicker": {},
  "timezone": "",
  "title": "Adopt stylesheets",
  "uid": "xcYNzjzIk",
  "version": 2,
  "weekStart": ""
}

[astro-manny]

Wow, I didn't know about the document stylesheets and the css Stylesheet object, absolutely amazing, Thank you!❤