Mut Style
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 :
Props
Only one prop css
is needed.
css
prop declaration :
export interface IMutStyleRules {
[selector: string]: CSSProperties; // CSSProperties is React internal style interface.
}