dsheet.md

dsheet() Addon

dsheet() (or Dynamic Sheet) interface is similar to sheet() interface, but allows you to add CSS overrides inside render functions, making it a 5^th generation interface.

const cssMap = {
    input: {
        border: '1px solid grey',
    },
    button: {
        border: '1px solid red',
        color: 'red',
    }
};
const styles = dsheet(cssMap);

Usage:

<input className={styles.input()}>
<input className={styles.input.toString()}>
<input className={'' + styles.input}>
<input className={String(styles.input)}>
<input className={styles.input({
    color: 'red',
    outline: 'none',
    ':focus': {
        outline: '1px solid blue'
    }
})}>

Optionally, you can name your dynamic style sheets.

const styles = sheet(cssMap, 'ContactForm');

Installation

Install dsheet addon and its dependencies:

• cache
• rule()
• sheet()

Read more about the Addon Installation.