clsx add Styling/css
clsx¹.1.1, css classname, styling, React¹⁷.0.2, Created at July 21, 2021, Read Series…
clsx is one of the most popular styling/css
tiny (228B) utility for constructingclassName
strings conditionally.
Also serves as a faster & smaller drop-in replacement for theclassnames
module.
npm install --save clsx
src/features/clsx/ClsxForm.tsx
[Try to understand] box, error, success css classnames in useStyles
[Try to understand] className={classes.box}
[Try to understand] className={clsx(classes.box, classes.error)}
[Try to understand] className={clsx(classes.box, classes.success)}
import { Box, makeStyles } from '@material-ui/core';
import clsx from 'clsx';const useStyles = makeStyles({
root: {
width: 240,
height: 240
},
box: {
padding: 8,
border: '5px solid #000'
},
error: {
fontSize: 24,
padding: 18,
background: 'red',
},
success: {
fontSize: 18,
padding: 0,
background: 'green',
}
});export default function ClsxForm(): JSX.Element {
const classes = useStyles();return (
<div className={classes.root}>
<Box className={classes.box}>
Regular
</Box>
<Box className={clsx(classes.box, classes.error)}>
Error
</Box>
<Box className={clsx(classes.box, classes.success)}>
Success
</Box>
</div>
);
};
Github commits is here: Basic-1.11. clsx
Conclusion
clsx
is generally used to conditionally apply a given className.
clsx
basically outputs a string
interpolation. So you don't have to necessarily use it although is a common practice.
You can use classnames
if you are familiar with it.