question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[gatsby-remark-images] Captions affecting styles of blog posts when using mdx

See original GitHub issue

Description

When using gatsby-plugin-mdx with gatsby-remark-images, some components in the mdx are not styled as expected while others are. This only occurs when showCaptions is set to true and the page with the MDX is accessed directly rather than through Gatsby’s Link component.

Steps to reproduce

Example repo: https://github.com/pavsidhu/gatsby-remark-bug

npm install
npm run build
gatsby serve

Go to localhost:9000, click the Go to post link to go to the blog post. You should see all the paragraphs are red. If you reload the page, some of the paragraphs are no longer styled as per the components prop in MDXProvider. If you remove showCaptions: true in gatsby.config.js, all paragraphs are styled properly.

Environment

System: OS: macOS 10.15.6 CPU: (4) x64 Intel® Core™ i5-4278U CPU @ 2.60GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 10.16.3 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.8 - /usr/local/bin/npm Languages: Python: 2.7.10 - /usr/local/bin/python Browsers: Edge: 83.0.478.50 Firefox: 81.0.2 Safari: 14.0 npmPackages: gatsby: ^2.24.86 => 2.24.86 gatsby-plugin-mdx: ^1.2.51 => 1.2.51 gatsby-plugin-sharp: ^2.6.43 => 2.6.43 gatsby-remark-images: ^3.3.39 => 3.3.39 gatsby-source-filesystem: ^2.3.36 => 2.4.2 gatsby-transformer-sharp: ^2.5.20 => 2.5.20 npmGlobalPackages: gatsby-cli: 2.12.51 gatsby: 2.23.7

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:14 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
tondicommented, Mar 23, 2021

Not stale

0reactions
github-actions[bot]commented, Aug 17, 2021

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

Read more comments on GitHub >

github_iconTop Results From Across the Web

gatsby-remark-images
Name Default Description showCaptions false quality 50 The quality level of the generated files.
Read more >
Transforming Markdown with Remark & Rehype - ryanfiller.com
To make my workflow less coupled to a specific technology, I decided to move the transformations up a level of abstraction. Instead of...
Read more >
Gatsby.JS: Working with Images in Markdown Posts and Pages
In sites like a blog, you may want to include a featured image that appears at the top of a page. One way...
Read more >
markdown
Tips, Tricks, and Techniques on using Cascading Style Sheets. ... The filenames post-1.md , post-2.md , post-3.md don't affect anything that is rendered...
Read more >
Migrating Gatsby Markdown Blog to MDX
You may have noticed that gatsby-transformer-remark plugin had a bunch of sub-plugins itself, such as gatsby-remark-images , gatsby-remark-responsive-iframe , ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found