Fixing AMP rendering

src/LazyHydrate.js

@@ -28,8 +28,7 @@ if (isBrowser()) {
   will be removed.
 */
 export function LazyStyles() {
-  const amp = useAmp()
-  if (amp) return null
+  if (useAmp()) return null
 
   let styles = null
   try {
@@ -91,11 +90,8 @@ Router.events.on('routeChangeStart', () => {
 })
 
 function LazyHydrateInstance({ id, className, ssrOnly, children, on, ...props }) {
-  const amp = useAmp()
-
   function isHydrated() {
     if (isBrowser()) {
-      if (amp) return true
       // If rendering after client side navigation
       if (window.__lazyHydrateNavigated) return true
       // return true
@@ -216,6 +212,7 @@ function LazyHydrateInstance({ id, className, ssrOnly, children, on, ...props })
  */
 
 function LazyHydrate({ children, ...props }) {
+  if (useAmp()) return children
   return (
     <LazyHydrateInstance {...props}>
       {/* LazyStylesProvider should not be used in the browser. Once components 

src/carousel/CarouselThumbnails.js

@@ -127,6 +127,7 @@ function CarouselThumbnails({
   classes,
   className,
   thumbnailPosition,
+  ImageComponent,
 }) {
   const styles = useStyles({ classes })
   const theme = useTheme()
@@ -152,7 +153,7 @@ function CarouselThumbnails({
         }}
       >
         {thumbnails.map(({ src, alt }, i) => {
-          const icon = <Image contain className={styles.thumb} src={src} alt={alt} />
+          const icon = <ImageComponent contain className={styles.thumb} src={src} alt={alt} />
           return (
             <Tab
               classes={{
@@ -205,6 +206,15 @@ CarouselThumbnails.propTypes = {
    * Position of the thumbnails, relative to the main carousel image.
    */
   thumbnailPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
+
+  /**
+   * The component type to use to display images.
+   */
+  ImageComponent: PropTypes.elementType,
+}
+
+CarouselThumbnails.defaultProps = {
+  ImageComponent: Image,
 }
 
-export default React.memo(CarouselThumbnails)
+export default CarouselThumbnails

src/carousel/Media.js

@@ -20,7 +20,7 @@ const useStyles = makeStyles(theme => ({
  * An element that determines the proper tag to use for a media node within a
  * [`Carousel`](/apiReference/carousel/Carousel).
  */
-export default function Media({
+function Media({
   magnifyProps,
   imageProps,
   videoProps,
@@ -29,6 +29,8 @@ export default function Media({
   magnify,
   sources,
   type = 'image',
+  ImageComponent,
+  ImageMagnifyComponent,
 }) {
   const classes = useStyles()
 
@@ -69,7 +71,7 @@ export default function Media({
     }
   } else if (magnify) {
     return (
-      <ReactImageMagnify
+      <ImageMagnifyComponent
         enlargedImagePosition="over"
         {...adjustMagnifyProps()}
         smallImage={{
@@ -81,7 +83,7 @@ export default function Media({
       />
     )
   } else {
-    return <Image key={src} src={src} alt={alt} fill {...imageProps} />
+    return <ImageComponent key={src} src={src} alt={alt} fill {...imageProps} />
   }
 }
 
@@ -127,4 +129,21 @@ Media.propTypes = {
    * If `false`, the media is not able to be magnified.
    */
   magnify: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+
+  /**
+   * The component type to use to display images.
+   */
+  ImageComponent: PropTypes.elementType,
+
+  /**
+   * The component type to use to display magnified images.
+   */
+  ImageMagnifyComponent: PropTypes.elementType,
+}
+
+Media.defaultProps = {
+  ImageComponent: Image,
+  ImageMagnifyComponent: ReactImageMagnify,
 }
+
+export default Media

src/carousel/MediaCarousel.js

@@ -1,10 +1,8 @@
-import { light } from '@material-ui/core/styles/createPalette'
 import PropTypes from 'prop-types'
 import React, { useCallback, useEffect, useState, useRef } from 'react'
 import clsx from 'clsx'
 import { makeStyles, useTheme } from '@material-ui/core/styles'
 import useMediaQuery from '@material-ui/core/useMediaQuery'
-import Fill from '../Fill'
 import Carousel from './Carousel'
 import Image from '../Image'
 import Lightbox from './Lightbox'
@@ -142,6 +140,7 @@ function MediaCarousel(props) {
     magnifyProps,
     id,
     CarouselComponent,
+    ImageComponent,
     MediaComponent,
     CarouselThumbnailsComponent,
     ...others
@@ -212,7 +211,7 @@ function MediaCarousel(props) {
 
   if (thumbnail && !imagesLoaded) {
     belowAdornments.push(
-      <Image
+      <ImageComponent
         id={THUMBNAIL_IMAGE_ID}
         key="thumbnail"
         className={styles.thumbnail}
@@ -416,6 +415,11 @@ MediaCarousel.propTypes = {
    * A component type to use for the main carousel component.
    */
   CarouselComponent: PropTypes.elementType,
+
+  /**
+   * The component type to use to display images.
+   */
+  ImageComponent: PropTypes.elementType,
 }
 
 MediaCarousel.defaultProps = {
@@ -424,6 +428,7 @@ MediaCarousel.defaultProps = {
   thumbnails: true,
   thumbnailPosition: 'bottom',
   MediaComponent: Media,
+  ImageComponent: Image,
   CarouselComponent: Carousel,
   CarouselThumbnailsComponent: CarouselThumbnails,
   videoProps: {
@@ -432,4 +437,4 @@ MediaCarousel.defaultProps = {
   },
 }
 
-export default React.memo(MediaCarousel)
+export default MediaCarousel