Unable to style the output of portable text

[AndrewNow]

Hi there,

Followed your starter and am having difficulty targeting the styles within the HTML that derives from Sanity.

I'm using the same sanityPortableText.js file as you have in your starter:

import { portableTextToHtml } from "astro-sanity";
import { getSanityImageURL } from "../utils/helpers.js";

const customComponents = {
  types: {
    mainImage: ({ value }) => {
      return `
        <picture>
          <source
            srcset="${getSanityImageURL(value.asset).format("webp").url()}"
            type="image/webp"
          />
          <img
            class="responsive__img"
            src="${getSanityImageURL(value.asset).url()}"
            alt="${value.alt}"
          />
        </picture>
      `;
    },
    image: ({ value }) => {
      return `
        <picture class="imageWrapper">
          <source
            srcset="${getSanityImageURL(value.asset).format("webp").url()}"
            type="image/webp"
          />
          <img
            class="responsive__img"
            src="${getSanityImageURL(value.asset).url()}"
            alt="${value.alt}"
          />
        </picture>
      `;
    },
    code: ({ value }) => {
      return `<code-block code='${value.code}' language='${value.language}'></code-block>`;
    },
  },
};

export function sanityPortableText(portabletext) {
  return portableTextToHtml(portabletext, customComponents);
}

and am rendering the content as such, in SanityPortableText.astro:

---
import { sanityPortableText } from "../lib/sanityPortableText";

const { portableText } = Astro.props;
---

<div class="test" set:html={sanityPortableText(portableText)} />

<style lang="scss">
  .test {
    h3 {
      border: 1px solid red; // not applied
    }
  }
</style>

I'm able to apply styles to the .test wrapper, but cannot target anything within it. For example, adding a border to this class will add a border to the wrapper, but if I try to target a P tag, or anything else for that matter, the styles don't apply.

What am I doing wrong here?

Here are my dependencies:

{
  "name": "astro-sanity-minimal-starter",
  "version": "v3.2.0",
  "private": false,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build"
  },
  "devDependencies": {
    "@astrojs/sitemap": "^0.1.0",
    "astro": "^1.2.4",
    "astro-sanity": "^1.0.0",
    "date-fns": "^2.23.0",
    "dotenv": "^10.0.0",
    "lit": "^2.3.1",
    "prettier": "2.8.4",
    "prettier-plugin-astro": "^0.8.0",
    "prismjs": "^1.25.0",
    "sass": "^1.58.1"
  },
  "dependencies": {
    "@astrojs/image": "^0.15.0",
    "gsap": "^3.11.4",
    "sharp": "^0.31.3"
  }
}

EDIT: This has been resolved, I just needed to add is:global to the