https://github.com/solidjs/solid-styled-jsx

A Styled JSX wrapper for Solid
https://github.com/solidjs/solid-styled-jsx

Last synced: 10 months ago
JSON representation

A Styled JSX wrapper for Solid

• Host: GitHub
• URL: https://github.com/solidjs/solid-styled-jsx
• Owner: solidjs
• Created: 2021-04-27T07:45:07.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2022-07-30T02:57:31.000Z (over 3 years ago)
• Last Synced: 2025-04-10T05:08:47.523Z (10 months ago)
• Language: JavaScript
• Size: 76.2 KB
• Stars: 51
• Watchers: 3
• Forks: 2
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


  



# Solid Styled JSX

[![NPM Version](https://img.shields.io/npm/v/solid-styled-jsx.svg?style=flat)](https://www.npmjs.com/package/solid-styled-jsx)

![](https://img.shields.io/npm/dm/solid-styled-jsx.svg?style=flat)

This library is a wrapper to allow you to use Solid with Zeit's [styled-jsx](https://github.com/zeit/styled-jsx). It accomplishes this by using a babel transform to change the Style JSX element import to use Solid's version. From there simply add the plugin `solid-styled-jsx/babel` to your babel config and you are good to go. The plugin accepts the same options as it's `styled-jsx/babel` counterpart.

**Note: SSR not supported yet**

**Note: Does not work with Create Solid App**

## Typescript

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

```jsx

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:

```jsx

function Button() {

  const [isLoggedIn, login] = createSignal(false);

  return (

    <>

       login(!isLoggedIn())}>

        {isLoggedIn() ? "Log Out" : "Log In"}

      

      

        {`

          .button {

            background-color: ${isLoggedIn() ? "blue" : "green"};

            color: white;

            padding: 20px;

            margin: 10px;

          }

        `}

      

    >

  );

}

```

Styled JSX provides a ton more like `css` function and a ton of plugins. Full documentation features can be found on [styled-jsx](https://github.com/zeit/styled-jsx) site.