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 constructing className strings conditionally.
Also serves as a faster & smaller drop-in replacement for the classnames 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.