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) {