scoped-style-components

Lightweight React components for scoping styles natively. CSS-in-JS without the runtime!

Install

npm i scoped-style-components

Usage

This package exports two components, Style and StyleLink. Both components wrap their child elements with display: contents in order to provide a scoping root.

Style

import Style from "scoped-style-components/Style.js";

This component accepts a css prop and scopes styles inline by rendering a style element and wrapping specified styles in an @scope block.

Example

import Style from "scoped-style-component/Style.js";

function Sidebar() {
  return (
    <Style
      css={`
        > aside {
          width: 200px;
          background-color: var(--color-sidebar);
          padding: var(--spacing-md);
          > ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            > li {
              padding: var(--spacing-sm) 0;
              cursor: pointer;
            }
          }
        }
      `}
    >
      <aside>
        <ul>
          <li>Inbox</li>
          <li>Sent</li>
          <li>Drafts</li>
          <li>Trash</li>
        </ul>
      </aside>
    </Style>
  );
}

StyleLink

import StyleLink from "scoped-style-components/StyleLink.js";

Similar to Style, this component instead accepts an href prop and renders a link element.

import StyleLink from "scoped-style-component/StyleLink.js";

function Sidebar() {
  return (
    <StyleLink href="/sidebar.css">
      <aside>
        <ul>
          <li>Inbox</li>
          <li>Sent</li>
          <li>Drafts</li>
          <li>Trash</li>
        </ul>
      </aside>
    </StyleLink>
  );
}

/* sidebar.css */
@scope {
  > aside {
    width: 200px;
    background-color: var(--color-sidebar);
    padding: var(--spacing-md);
    > ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      > li {
        padding: var(--spacing-sm) 0;
        cursor: pointer;
      }
    }
  }
}

Recommended

For autocompletion and syntax highlighting support in VSCode. Install the vscode-styled-components extension as well as fake-tag. The extension will provide syntax highlighting and autocompletion when using the css tag as a tagged template.

Example:

import css from "fake-tag";
import Style from "scoped-style-components/Style.js";

export default function Link(props: React.ComponentProps<"a">) {
  return (
    <Style
      css={css`
        a {
          color: forestgreen;
        }
      `}
    >
      <a {...props} />
    </Style>
  );
}

License

MIT