CSS

CSS for your component can be defined in one of three ways:

• As a string.
• As a function returning a string that receives the component instance.
• As an object, denoting CSS on a per-breakpoint basis.

All CSS defined on a component is automatically scoped to that component's auto-generated id behind the scenes. For example, given a component id of abcdefg1234567, Joystick will automatically compile any CSS returned by the component to look like this:

[js-c="abcdefg1234567"] .some-selector {
  background: #000;
}

Of note, by default, styles will only apply to the HTML located inside of the wrapper element auto-generated by Joystick. If you'd like to style the wrapper element specifically (using any of the methods below), prefix rules with the special @wrapper selector:

@wrapper {
  background: #000;
  padding: 20px;
}

.some-non-wrapper-selector p {
  font-size: 24px;
  line-height: 36px;
}

Defining CSS as a String

To define CSS as a string, just pass the css option on your component as a string literal using backticks ``:

import joystick from '@joystick.js/ui';

const Index = joystick.component({
  css: `
    @wrapper {
      background: #000;
    }

    p {
      font-size: 18px;
      line-height: 26px;
      color: #333;
    }
  `,
  render: () => {
    return `
      <div>
        <p>Some text on the page</p>
      </div>
    `;
  },
});

export default Index;

Defining CSS as a Function

If you'd like to have access to your component instance when defining CSS rules (e.g., to define conditional CSS based on props or state) just pass the css option on your component as a function returning a string literal using backticks ``:

import joystick from '@joystick.js/ui';

const Index = joystick.component({
  css: (instance = {}) => `
    @wrapper {
      background: #000;
    }

    p {
      font-size: 18px;
      line-height: 26px;
      color: ${instance?.props?.info ? '#0099ff' : '#333'};
    }
  `,
  render: () => {
    return `
      <div>
        <p>Some text on the page</p>
      </div>
    `;
  },
});

export default Index;

Function API Reference

css(component_instance: object) => string;

Function API Parameters

Defining CSS as an Object

If you're building a responsive UI, the recommended approach for writing CSS is using the object-based syntax. Note: all of the above concepts apply (defining CSS as a string or as a function returning a `string), the only difference is how you organize your CSS:

import joystick from '@joystick.js/ui';

const Index = joystick.component({
  css: {
    min: {
      width: {
        0: `
          @wrapper {
            background: #000;
          }

          p {
            font-size: 14px;
            line-height: 24px;
            color: #333;
          }
        `,
        768: (instance = {}) => {
          p {
            font-size: 18px;
            line-height: 26px;
            color: ${instance?.props?.info ? '#0099ff' : '#333'};
          }
        },
        992: `
          p {
            font-size: 20px;
            line-height: 30px;
          }
        `,
      },
    },
    print: `
      @wrapper {
        background: #fff;
      }

      p {
        background: #fff;
        color: #000;
      }
    `,
  },
  render: () => {
    return `
      <div>
        <p>Some text on the page</p>
      </div>
    `;
  },
});

export default Index;

Above, we define our CSS using object syntax which allows us to define min and max rules for both width and height breakpoints in our CSS. Behind the scenes, Joystick will automatically wrap the CSS we pass in the relevant @media screen and (min-<width|height>: <width|height>) {} tags. We've also included some print styles which will apply to our component when the operating system's "print" dialog is opened.

Though more verbose, using the object-based syntax is highly recommended for UIs that require complex, responsive styles.

Object API Reference

css: object;

Object API Parameters