Solid Styled JSX

This library is a wrapper to allow you to use Solid with Zeit's styled-jsx. It accomplishes this by using a babel transform to change the Style JSX element import to use Solid's version.

Warning

SSR not supported yet.

Does not work with Create Solid App yet.

Install

Note that solid-jsx is a peer dependency, so it has to be installed too:

npm install solid-styled-jsx styled-jsx

From there simply add the plugin solid-styled-jsx/babel to your babel config,

module.export = {
  presets: ['babel-preset-solid'],
  plugins: ['solid-styled-jsx/babel'],
}

and you are good to go. The plugin accepts the same options as it's styled-jsx/babel counterpart.

Typescript

To get the proper JSX types in your project simply import solid-styled-jsx one time at the root of your project.

import type {} from "solid-styled-jsx";

Gist

Styled JSX lets you use style tags and string class names to style your components with scoped styles. You indicate that a style tag is to be handled by including the jsx prop. In addition you can add global prop for global non-scoped styles and dynamic for ones that have styles that change based on props. Typical reactive rules apply. Example:

function Button() {
  const [isLoggedIn, login] = createSignal(false);
  return (
    <>
      <button className="button" onClick={() => login(!isLoggedIn())}>
        {isLoggedIn() ? "Log Out" : "Log In"}
      </button>
      <style jsx dynamic>
        {`
          .button {
            background-color: ${isLoggedIn() ? "blue" : "green"};
            color: white;
            padding: 20px;
            margin: 10px;
          }
        `}
      </style>
    </>
  );
}

Styled JSX provides a ton more like css function and a ton of plugins. Full documentation features can be found on styled-jsx site.