Scoped og inline stylesheet uten noe rammeverk

Det er vanlig å bruke inline style for å gi komponenter litt styling, spesielt hvis du skal ha gjenbrukbare komponenter der du ikke ønsker å bundle med en css fil i tillegg. Noe som bare kan flyttes og importers rett inn i en kodebase.

export function FancyButton({ children }) {
  return (
    <button
      style={{
        width: "200px",
        fontWeight: "bold",
      }}
    >
      {children}
    </button>
  );
}

En klar begrensing med dette er at du ikke kan i bruk media queries for et responsivt design eller lage animations da dette bare støttes i ren CSS

Men viste du at du ikke trenger å bundle med en css fil? Du kan faktisk bundle med en <style> tag som inneholder CSS’en du ønsker.

JSX i react støtter ikke å kode innhold i style tags, men du kan komme rundt ved å ta i bruk dangerouslySetInnerHTML

export function FancyButton({ children }) {
  const styleClassName = `fancy-button-something-unique`;
  return (
    <>
      <style
        dangerouslySetInnerHTML={{
          __html: `
           .${styleClassName} {
             width: 200px;
             font-weight: "bold";
           }`,
        }}
      />
      <button className={styleClassName}>{children}</button>
    </>
  );
}

Denne metoden vil også fungere for andre rammeverk, eller ren html + javascript. Bruker man Svelte og Vue så løses dette av rammeverket, men fram til dette blir normen så er fint å vite at man ikke er 100% bundet til begrensingen.