diff --git a/ui/package-lock.json b/ui/package-lock.json
index 42323c735..2341b76f4 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -4184,9 +4184,9 @@
       }
     },
     "clsx": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz",
-      "integrity": "sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA=="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
     },
     "co": {
       "version": "4.6.0",
diff --git a/ui/package.json b/ui/package.json
index 619c28917..d28fdcd4f 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/lab": "^4.0.0-alpha.56",
+    "clsx": "^1.1.1",
     "deepmerge": "^4.2.2",
     "jwt-decode": "^3.1.2",
     "lodash.get": "^4.4.2",
diff --git a/ui/src/album/AlbumSongs.js b/ui/src/album/AlbumSongs.js
index b32f3ae9e..72ff962db 100644
--- a/ui/src/album/AlbumSongs.js
+++ b/ui/src/album/AlbumSongs.js
@@ -6,7 +6,7 @@ import {
   useVersion,
   useListContext,
 } from 'react-admin'
-import classnames from 'classnames'
+import clsx from 'clsx'
 import { useDispatch } from 'react-redux'
 import { Card, useMediaQuery } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
@@ -86,7 +86,7 @@ const AlbumSongs = (props) => {
       />
       <div className={classes.main}>
         <Card
-          className={classnames(classes.content, {
+          className={clsx(classes.content, {
             [classes.bulkActionsDisplayed]: props.selectedIds.length > 0,
           })}
           key={version}
diff --git a/ui/src/playlist/PlaylistSongs.js b/ui/src/playlist/PlaylistSongs.js
index b04968921..22cb58186 100644
--- a/ui/src/playlist/PlaylistSongs.js
+++ b/ui/src/playlist/PlaylistSongs.js
@@ -9,7 +9,7 @@ import {
   useVersion,
   useListContext,
 } from 'react-admin'
-import classnames from 'classnames'
+import clsx from 'clsx'
 import { useDispatch } from 'react-redux'
 import { Card, useMediaQuery } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
@@ -133,7 +133,7 @@ const PlaylistSongs = ({ playlistId, readOnly, ...props }) => {
       />
       <div className={classes.main}>
         <Card
-          className={classnames(classes.content, {
+          className={clsx(classes.content, {
             [classes.bulkActionsDisplayed]: props.selectedIds.length > 0,
           })}
           key={version}
diff --git a/ui/src/user/DeleteUserButton.js b/ui/src/user/DeleteUserButton.js
index 852fcada8..913904a9c 100644
--- a/ui/src/user/DeleteUserButton.js
+++ b/ui/src/user/DeleteUserButton.js
@@ -2,7 +2,7 @@ import React from 'react'
 import DeleteIcon from '@material-ui/icons/Delete'
 import { makeStyles } from '@material-ui/core/styles'
 import { fade } from '@material-ui/core/styles/colorManipulator'
-import classnames from 'classnames'
+import clsx from 'clsx'
 import { useDeleteWithConfirmController, Button, Confirm } from 'react-admin'
 
 const useStyles = makeStyles(
@@ -51,11 +51,7 @@ const DeleteUserButton = (props) => {
       <Button
         onClick={handleDialogOpen}
         label="ra.action.delete"
-        className={classnames(
-          'ra-delete-button',
-          classes.deleteButton,
-          className
-        )}
+        className={clsx('ra-delete-button', classes.deleteButton, className)}
         key="button"
         {...rest}
       >