Getting odd ESLint warnings when creating custom components for mdx template...

I am a bit perplexed…I’m making some custom components for an mdx template following the examples in the tutorial, like so:

const P = props =>
  <p
    {...props}
    style={{
      gridColumn: '2/3',
      fontFamily: 'Avenir Next',
      color: 'white',
      fontSize: 'calc(18px + (24 - 18) * ((100vw - 300px) / (1600 - 300)))',
      lineHeight: 2,
      fontWeight: '300'
    }} 
  />

…but I’m getting this odd lint warning for each component I create in this fashion:

warn ESLintError: 
/Users/rchrdnsh/Documents/Code/Gatsby/RYKR/src/templates/article.js
  185:3  warning  Headings must have content and the content must be accessible by a screen reader
jsx-a11y/heading-has-content
  196:3  warning  Headings must have content and the content must be accessible by a screen reader
jsx-a11y/heading-has-content
  207:3  warning  Headings must have content and the content must be accessible by a screen reader
jsx-a11y/heading-has-content
  218:3  warning  Headings must have content and the content must be accessible by a screen reader
jsx-a11y/heading-has-content
  229:3  warning  Headings must have content and the content must be accessible by a screen reader

…so i don’t know what’s going on here, and would love to get rid of these warnings, but is there an issue with mdx or what i’m doing that I am unaware of?

[ascorbic]

OK, that would be it. If you change your code to e.g.

const H1 = ({children, ...props}) =>
  <h1
    {...props}
    style={{
      gridColumn: '2/3',
      fontFamily: 'Oswald',
      fontSize: 'calc(32px + (48 - 32) * ((100vw - 300px) / (1600 - 300)))',
      color: 'white'
    }}
  >{children}</h1>

then it should fix it.

If you want to define the components in another file it’s quite simple: you just need to export them from that file:

// src/components/DesignSystem.js

export const H1 = ({children, ...props}) =>
  <h1
    {...props}
    style={{
      gridColumn: '2/3',
      fontFamily: 'Oswald',
      fontSize: 'calc(32px + (48 - 32) * ((100vw - 300px) / (1600 - 300)))',
      color: 'white'
    }}
  >{children}</h1>

// ...

…and then import them into your component:

// src/templates/article.js

import { H1, H2, H3, H4, P } from "../components/DesignSystem";

const components = {
  h1: H1,
  h2: H2,
  h3: H3,
  h4: H4,
  h5: H5,
  h6: H6,
  p: P
}

// ...and then the rest of the file as before

We could probably do with updating the documentation to show the use of { children }.

[rchrdnsh]

hmmmmm…i think this got solved, so i’ll close for now…i think.