diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
index 3192f2b000346..046b5feeb20c9 100644
--- a/packages/block-library/src/site-logo/edit.js
+++ b/packages/block-library/src/site-logo/edit.js
@@ -73,7 +73,6 @@ const SiteLogo = ( {
 	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const { toggleSelection } = useDispatch( blockEditorStore );
-	const classes = clsx( 'custom-logo-link' );
 	const { imageEditing, maxWidth, title } = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
 		const siteEntities = select( coreStore ).getEntityRecord(
@@ -136,7 +135,7 @@ const SiteLogo = ( {
 			/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 			<a
 				href={ siteUrl }
-				className={ classes }
+				className="custom-logo-link"
 				rel="home"
 				title={ title }
 				onClick={ ( event ) => event.preventDefault() }
diff --git a/packages/components/src/animate/index.tsx b/packages/components/src/animate/index.tsx
index e7aaf72d24380..e819020447bc9 100644
--- a/packages/components/src/animate/index.tsx
+++ b/packages/components/src/animate/index.tsx
@@ -23,7 +23,7 @@ function getDefaultOrigin( type?: GetAnimateOptions[ 'type' ] ) {
  */
 export function getAnimateClassName( options: GetAnimateOptions ) {
 	if ( options.type === 'loading' ) {
-		return clsx( 'components-animate__loading' );
+		return 'components-animate__loading';
 	}
 
 	const { type, origin = getDefaultOrigin( type ) } = options;
diff --git a/packages/components/src/focal-point-picker/focal-point.tsx b/packages/components/src/focal-point-picker/focal-point.tsx
index 7a401eb4c6870..a03e41d4809cc 100644
--- a/packages/components/src/focal-point-picker/focal-point.tsx
+++ b/packages/components/src/focal-point-picker/focal-point.tsx
@@ -6,7 +6,6 @@ import { PointerCircle } from './styles/focal-point-style';
 /**
  * External dependencies
  */
-import clsx from 'clsx';
 import type { FocalPointProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
@@ -15,9 +14,13 @@ export default function FocalPoint( {
 	top = '50%',
 	...props
 }: WordPressComponentProps< FocalPointProps, 'div' > ) {
-	const classes = clsx( 'components-focal-point-picker__icon_container' );
-
 	const style = { left, top };
 
-	return <PointerCircle { ...props } className={ classes } style={ style } />;
+	return (
+		<PointerCircle
+			{ ...props }
+			className="components-focal-point-picker__icon_container"
+			style={ style }
+		/>
+	);
 }
diff --git a/packages/edit-site/src/components/save-panel/index.js b/packages/edit-site/src/components/save-panel/index.js
index 87621638b233f..1f784edc52234 100644
--- a/packages/edit-site/src/components/save-panel/index.js
+++ b/packages/edit-site/src/components/save-panel/index.js
@@ -151,9 +151,7 @@ export default function SavePanel() {
 			>
 				<Button
 					variant="secondary"
-					className={ clsx(
-						'edit-site-editor__toggle-save-panel-button'
-					) }
+					className="edit-site-editor__toggle-save-panel-button"
 					onClick={ () => setIsSaveViewOpened( true ) }
 					aria-haspopup={ 'dialog' }
 					disabled={ disabled }
diff --git a/storybook/decorators/with-global-css.js b/storybook/decorators/with-global-css.js
index 298d841d1c2a5..d3d283234be1e 100644
--- a/storybook/decorators/with-global-css.js
+++ b/storybook/decorators/with-global-css.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -14,6 +9,11 @@ import { useEffect } from '@wordpress/element';
 import basicStyles from '../global-basic.lazy.scss';
 import wordPressStyles from '../global-wordpress.lazy.scss';
 
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * A Storybook decorator to inject global CSS.
  *