diff --git a/docs/src/modules/components/AdCarbon.js b/docs/src/modules/components/AdCarbon.js
index cf903c5bb1331c..dddb77f10ad3e1 100644
--- a/docs/src/modules/components/AdCarbon.js
+++ b/docs/src/modules/components/AdCarbon.js
@@ -1,14 +1,32 @@
import * as React from 'react';
-import GlobalStyles from '@mui/material/GlobalStyles';
+import { styled } from '@mui/material/styles';
import loadScript from 'docs/src/modules/utils/loadScript';
import AdDisplay from 'docs/src/modules/components/AdDisplay';
import { adStylesObject } from 'docs/src/modules/components/ad.styles';
+const CarbonRoot = styled('span')(({ theme }) => {
+ const styles = adStylesObject['body-image'](theme);
+
+ return {
+ '& #carbonads': {
+ ...styles.root,
+ '& .carbon-img': styles.imgWrapper,
+ '& img': styles.img,
+ '& a, & a:hover': styles.a,
+ '& .carbon-text': styles.description,
+ '& .carbon-poweredby': styles.poweredby,
+ },
+ '& [id^=carbonads_]': {
+ display: 'none',
+ },
+ };
+});
+
function AdCarbonImage() {
const ref = React.useRef(null);
React.useEffect(() => {
- // The isolation logic of carbonads is flawed.
+ // The isolation logic of carbonads is broken.
// Once the script starts loading, it will asynchronous resolve, with no way to stop it.
// This leads to duplication of the ad. To solve the issue, we debounce the load action.
const load = setTimeout(() => {
@@ -24,27 +42,7 @@ function AdCarbonImage() {
};
}, []);
- return (
-
- {
- const styles = adStylesObject['body-image'](theme);
-
- return {
- '#carbonads': {
- ...styles.root,
- '& .carbon-img': styles.imgWrapper,
- '& img': styles.img,
- '& a, & a:hover': styles.a,
- '& .carbon-text': styles.description,
- '& .carbon-poweredby': styles.poweredby,
- },
- };
- }}
- />
-
-
- );
+ return ;
}
export function AdCarbonInline(props) {