Style Portion

gadjet provide useful style portion which can be used with HTML elements and can be injected to HTML page by tag template addStyle.

js

import { addStyle, bgColorInt } from 'gadjet/dist/bundle/gadjet.js';

// Add interactive background color to <button> element
addStyle`
button {
    ${bgColorInt('blue')}
}`;

note

gadjet implement CSS-in-JS by using feature from @emotion/css. If you look into the source code, you will see that addStyle is just a function that point to injectGlobal from @emotion/css.

Style portions