mut-style

1.0.1 • Public • Published

Mut Style CI

Achieve styled component using mutable <style> tag.

Usage

// This component will transfer the css properties rules to css content,
// and insert the css into <style> tag.
// Current css will work in the wrapped scope.
export function Foo() {
    const [color, setColor] = useState('red');

    return (
        <div>
            <MutStyle css={{ '.hello': { color } }}>
                <div className="hello">hello</div>
            </MutStyle>
            <button
                onClick={() => {
                    setColor(color === 'red' ? 'blue' : 'red');
                }}
            >
                Change text color
            </button>
        </div>
    );
}

The above code will behavior like this :

record

Props

Only one prop css is needed.

css prop declaration :

export interface IMutStyleRules {
    [selector: string]: CSSProperties; // CSSProperties is React internal style interface.
}

Readme

Keywords

none

Package Sidebar

Install

npm i mut-style

Weekly Downloads

0

Version

1.0.1

License

MIT

Unpacked Size

2.46 MB

Total Files

27

Last publish

Collaborators

  • ray5cc