mui-sx
v1.0.0
Published
A simple utility for conditionally joining material ui sx props together.
Downloads
3,528
Maintainers
Readme
mui-sx
A simple utility for conditionally joining material ui sx props together.
Features
- Cleaner conditional sx composition syntax inspired from classnames
- Extremely tiny 0.36kb (gzipped) 0.6kb (minified) 🎉
- Type-definitions ✔
Demo
Codesandbox: https://codesandbox.io/s/sx-compose-example-z0mki
Installation
Install mui-sx
using your package manager
npm install mui-sx --save
OR
yarn add mui-sx
Import
import sx from 'mui-sx';
Usage
Basic Sx
const sxDisplayFlex = { display: 'flex' }
const sxDisplayTable = { display: 'table' }
const sxBordered = { border: '1px solid' }
sx(sxDisplayFlex) // => { display: 'flex' }
sx(sxDisplayFlex, sxBordered) // => { display: 'flex', border: '1px solid' }
sx(sxDisplayTable, sxBordered) // => { display: 'flex', border: '1px solid' }
Conditional Sx
sx({ condition: false, sx: sxDisplayFlex }) // => {}
sx({ condition: true, sx: sxDisplayFlex }) // => { display: 'flex' }
Mixed
sx(sxBordered, { condition: false, sx: sxDisplayFlex }) // => { border: '1px solid' }
sx(sxBordered, { condition: true, sx: sxDisplayFlex }) // => { border: '1px solid', display: 'flex' }
sx(sxBordered, sxDisplayFlex, { condition: true, sx: sxDisplayTable }) // => { border: '1px solid', display: 'table' }
LICENSE MIT
Copyright (c) 2021 Rohan Salunke. Copyright of the Typescript bindings are respective of each contributor listed in the definition file.