Fix isDisabled so that it keeps its value even if it is changed.

packages/components/src/disabled/index.tsx

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -12,9 +7,10 @@ import { createContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { StyledWrapper } from './styles/disabled-styles';
+import { disabledStyles } from './styles/disabled-styles';
 import type { DisabledProps } from './types';
 import type { WordPressComponentProps } from '../ui/context';
+import { useCx } from '../utils';
 
 const Context = createContext< boolean >( false );
 const { Consumer, Provider } = Context;
@@ -56,20 +52,28 @@ function Disabled( {
 	...props
 }: Omit< WordPressComponentProps< DisabledProps, 'div' >, 'ref' > ) {
 	const ref = useDisabled();
-
+	const cx = useCx();
 	if ( ! isDisabled ) {
-		return <Provider value={ false }>{ children }</Provider>;
+		return (
+			<Provider value={ false }>
+				<div>{ children }</div>
+			</Provider>
+		);
 	}
 
 	return (
 		<Provider value={ true }>
-			<StyledWrapper
+			<div
 				ref={ ref }
-				className={ classnames( className, 'components-disabled' ) }
+				className={ cx(
+					disabledStyles,
+					className,
+					'components-disabled'
+				) }
 				{ ...props }
 			>
 				{ children }
-			</StyledWrapper>
+			</div>
 		</Provider>
 	);
 }

packages/components/src/disabled/styles/disabled-styles.tsx

@@ -1,9 +1,9 @@
 /**
  * External dependencies
  */
-import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 
-export const StyledWrapper = styled.div`
+export const disabledStyles = css`
 	position: relative;
 	pointer-events: none;