[question]why the code backgound color is white rather than grey?

[liaodalin19903]

why the code backgound color is white rather than grey?

import React from 'react'
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

export default function App() {

  const mdString = `
    
    import React from 'react'
    import ReactDOM from 'react-dom'
    import Markdown from 'react-markdown'
    import MyFancyRule from './components/my-fancy-rule.js'

    ReactDOM.render(
      <Markdown
        components={{
          // Use h2s instead of h1s
          h1: 'h2',
          // Use a component instead of hrs
          hr(props) {
            const {node, ...rest} = props
            return <MyFancyRule {...rest} />
          }
        }}
      >
        {markdown}
      </Markdown>,
      document.querySelector('#content')
    )

  `
  
  return (
    <div style={{ backgroundColor: '#ffffff' }}>

      <Markdown remarkPlugins={[remarkGfm]}>{mdString}</Markdown>
    </div>
    
  )
}

the result:

you see the example given by official is grey:

[wooorm]

You want to know how CSS works. There are many many many resources that explain how CSS works. MDN is a good start: https://developer.mozilla.org/en-US/docs/Web/CSS