diff --git a/packages/components/src/disabled/index.tsx b/packages/components/src/disabled/index.tsx
index 10618c19de93f..b59f47e4c32b3 100644
--- a/packages/components/src/disabled/index.tsx
+++ b/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 { children };
+ return (
+
+ { children }
+
+ );
}
return (
-
{ children }
-
+
);
}
diff --git a/packages/components/src/disabled/styles/disabled-styles.tsx b/packages/components/src/disabled/styles/disabled-styles.tsx
index b0ebeef887397..28e617efcbe0d 100644
--- a/packages/components/src/disabled/styles/disabled-styles.tsx
+++ b/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;