clsx is a tiny utility for constructing className strings conditionally, out of an object with keys being the class strings, and values being booleans.
Instead of writing:
1 2 3 4 5 6 7 | // let disabled = false, selected = true; return ( <div className={`MuiButton-root ${disabled ? 'Mui-disabled' : ''} ${selected ? 'Mui-selected' : ''}`} /> ); |
You can do like below example:
1 2 3 4 5 6 7 8 9 10 | import clsx from 'clsx'; return ( <div className={clsx('MuiButton-root', { 'Mui-disabled': disabled, 'Mui-selected': selected, })} /> ); |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.