gatsby-remark-images with MDX: Can't set backgroundColor

[Cecile-Lebleu]

Description

A png image added inline in a md or mdx file using gatsby-remark-images shows a white background, when the backgroundColor has been specified in gatsby-config.js.

Steps to reproduce

Using gatsby-plugin-mdx and gatsby-remark-images, using the same syntax and very similar structure as the docs. I set the background color in gatsby-config.js but it doesn't change from white. The goal is no background, so I tried with none, transparent, and with color names or codes; but it stays white. Currently set to red to see if it changes.
Inspecting the element I see it's getting an inline box-shadow inserted (box-shadow: white 0px 0px 0px 400px inset;), and I can't overwrite it.

Live example: http://diarly.surge.sh/help/Configuration/
In the link there's an image that should have a red or transparent background, but instead, it's white.

Expected result

The background color should change to the color specified in gatsby-config.js.

Actual result

The image background color is white, no matter the value entered to backgroundColor in gatsby-config.js.

Environment

System:
OS: macOS 10.15.5
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.9.0 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.5 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 83.0.4103.116
Firefox: 76.0.1
Safari: 13.1.1
npmPackages:
gatsby: ^2.22.10 => 2.22.10
gatsby-cli: ^2.12.51 => 2.12.51
gatsby-image: ^2.4.5 => 2.4.5
gatsby-plugin-cookiehub-banner: ^0.1.0 => 0.1.0
gatsby-plugin-google-analytics-gdpr: 0.0.5 => 0.0.5
gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
gatsby-plugin-manifest: ^2.4.9 => 2.4.9
gatsby-plugin-mdx: ^1.2.17 => 1.2.17
gatsby-plugin-offline: ^3.2.7 => 3.2.7
gatsby-plugin-react-helmet: ^3.3.2 => 3.3.2
gatsby-plugin-sass: ^2.3.2 => 2.3.2
gatsby-plugin-sharp: ^2.6.9 => 2.6.9
gatsby-plugin-sitemap: ^2.4.3 => 2.4.3
gatsby-remark-copy-linked-files: ^2.3.5 => 2.3.5
gatsby-remark-images: ^3.3.8 => 3.3.8
gatsby-source-filesystem: ^2.3.8 => 2.3.8
gatsby-transformer-sharp: ^2.5.3 => 2.5.3
npmGlobalPackages:
gatsby-cli: 2.7.37

[pieh]

This is unfortunately known issue. Root cause is tracked in #21592

As a workaround please configure your gatsby-plugin-mdx as follows:

{
      resolve: `gatsby-plugin-mdx`,
      options: {
        // a workaround to solve mdx-remark plugin compat issue
        // we add gatsby-remark-images (with same options) to both
        // `plugins` and `gatsbyRemarkPlugins`
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
              backgroundColor: `red`,
            },
          },
        ],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
              backgroundColor: `red`,
            },
          },
          // rest of regular subplugins
        ]
      }
}

[Cecile-Lebleu]

Worked great with red and with transparent too. Goal achieved. Thanks @pieh :)