When it comes to styling articles, I love working with @tailwindcss/typography
plugin. 🤩 By simply adding .prose
to an HTML element it styles the inner HTML elements by itself.
<article class="prose">
<h1>Title</h2>
<p>Some text</p>
<h2>Subtitle</h2>
<p>Some text</p>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</article>
While working with MDX components it makes a bit challenging if you want to style inner components.
The problem
For example you want style a <Warning />
component inside an MDX article. You would create something like this.
export default function Warning({ children }) {
return (
<section
className="px-8 py-4 my-10 text-lg rounded bg-red-100 text-red-500"
>
{children}
</section>
);
}
The component will be added to the article in this manner.
---
title: "Very important article"
---
Some text
<Warning>
<p>Be careful!</p>
</Warning>
This will yield:
<article class="prose">
<p>Some text</p>
<section className="px-8 py-4 my-10 text-lg rounded bg-red-100 text-red-500">
<p>Be careful!</p>
</section>;
</article>
Even though .text-red-500
is applied on the warning section, the text will inherit the styles from the .prose
. Yikes... 😬
The solution
The solution is actually quite simple.
By adding .not-prose
to the section element the .prose
styles will be ignored.
export default function Warning({ children }) {
return (
<section
// Adding .not-prose here! 🏗
className="not-prose px-8 py-4 my-10 text-lg rounded bg-red-100 text-red-500"
>
{children}
</section>
);
}
Top comments (1)
Thanks! Needed exactly that