[Help wanted] Custom components doesn't work normally

[lqhuang]

Describe the bug
I'm a developer in science computing, not very familiar with javascript. I'm using gatsbyjs and theme-ui to build my own Blog pages. Now I met some confused problems in failed to configure gatsby-plugin-theme-ui with custom components.

Hence, sorry to disturb community for asking a favor.

Generally, I hope to use custom components to add hashtag(#) and link when hover in title. I have read all documents even in both gatsbyjs and theme-ui index page to layout file structure and configuration.

I create a directory named gatsby-plugin-theme-ui, the structure of folder look likes following:

gatsby-plugin-theme-ui
├── base.js
├── breakpoints.js
├── colors.js
├── components.js
├── index.js
└── typography.js

Then export theme object in index.js and custom components in components.jsx (I have tried both .js and .jsx). Theme styles of components work well but custom components didn't perform normally as I expected. Codes in components.js look likes following

const heading = (Tag) => (props) => {
  if (!props.id) {
    return <Tag {...props}>{props.children}</Tag>
  }
  return (
    <Tag {...props}>
      Not work???
      #<Styled.a href={`#${props.id}`}>{props.children}</Styled.a>
    </Tag>
  )
}

const components = {
  h1: heading('h1'),
  h2: heading('h2'),
  h3: heading('h3'),
  h4: heading('h4'),
  pre: (props) => props.children,
  code: Prism,
}

export default components

That's very perplex. BaseStyle has applied in all markdown components and gatsby-plugin-theme-ui has been enabled in gatsby-config.js.

To Reproduce
I have post my repo into attachment. You're able to check it. If who's interesting in it. Could you please help to figure out why custom components doesn't work well?

How to run: 1. npm install 2. npm start 3. check http://localhost:8000/2017-04-04-code-and-syntax-highlighting and compare with file src/gatsby-plugin-theme-ui/components.js.

Expected behavior
A hashtag (#) before title when hover

Additional context
See attached files for your information
blog-demo.zip

Thanks very much !!!

[lachlanjc]

Hey! I checked out the code, & it looks like you’re missing the remark-slug package in your config, as described here: https://theme-ui.com/guides/linked-headings

[lqhuang]

Hey @lachlanjc, thanks. Yeah, I just miss this tutorial. That's my fault. But I still cannot reproduce correct results by adding config:

const remarkSlug = require('remark-slug')
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        remarkPlugins: [
          remarkSlug,
        ]
      }
    }
  ]
}

And how about other custom components except heading like a: (props) => <a>the same, not work?{props.children}</a> didn't work either?

Here, I attached my improved code base FYI. Please check it.
improved.zip

Thank you again :)

[lqhuang]

@lachlanjc Hey, Lachlan. Could you help me to check it. Please. Sorry to @ you again.

[lachlanjc]

@lqhuang I can’t see your content, but are you using .md or .mdx files for your Markdown content? If you’re using .md, your configuration of gatsby-plugin-mdx is made irrelevant since no files are using it, & you want to put https://www.gatsbyjs.org/packages/gatsby-remark-slug/ in the remark config instead. If you’re using .mdx, your gatsby-transformer-remark config in the attached code won’t be applying. (Also, using a GitHub link instead of a zip makes it much easier for folks to quickly see your code)

[lqhuang]

@lachlanjc Thanks to your reply! Yeah, I'm using .md content. I just thought zip is easy to download then reproduce results. Sorry for the inconvenience. Here is link to my repo: https://github.com/lqhuang/lqhuang-blog and check v2-gatsby branch.

[lachlanjc]

Got it. Go ahead & set up https://www.gatsbyjs.org/packages/gatsby-remark-slug/ then. What’s in your components.js & your config on the MDX plug-in aren’t applying to anything since you don’t have MDX content.

[lqhuang]

Sorry, I'm a little confused now. If I don't want to introduce .mdx as content, how could I custom components?

In other words, currently, components.js wouldn't apply in any component rendered by transformer-remark. Is that right?

[lachlanjc]

That is correct. You’ll want to ignore everything in the Theme UI docs about styling Markdown, as it’s designed for MDX, & probably wrap your static Markdown content in <BaseStyles>.

[lqhuang]

OK, I see. Then the problem is that I have wrapped static Markdown content into <BaseStyles>.

Check here

[lqhuang]

And I have set custom <a> components. It seems <Styled.a> also didn't apply styles correctly? (1) custom components (2) usage case in header

[lachlanjc]

@lqhuang Try this instead? #867 (comment)

[lqhuang]

Thanks for reply. I just tried to replace <Styled.a> to <A> (Link as A) from theme-ui. Seems still the same.

You could check this commit.

[lqhuang]

@lachlanjc Hey, Lachlan. Could you drop in a little time to look this again? Sorry to trouble you.

[dowi]

To add to this conversation - I also have the same problem
using the example in the docs https://theme-ui.com/packages/gatsby-plugin/

Editing the index.js works (e.g. color changing)
Editing the components.js does nothing, even with the example used as is

// src/gatsby-plugin-theme-ui/components.js
import React from "react" //missing from the docs

export default {
  h1: props => (
    <h1 {...props}>
      <a href={`#${props.id}`}>{props.children}</a>
    </h1>
  ),
}

[lqhuang]

@dowi Thanks for help! My case is very similar with yours. I have checked my codes. Found that I have imported jsx

/** @jsx jsx */
import { jsx, Styled } from 'theme-ui'

check here. It should be the same.

I also tried replace it with import React from "react", but nothing changed, custom components still didn't apply.