When using callout components (<Note> and <Warning>), the styling of children (<strong> and <a>) is being overridden by the prose styles.
For example, the following code:
<Warning>
This is a Warning callout with **bold text** and a
[link](https://www.mintlify.com) to showcase the color issues.
</Warning>
<Note>
This is a Note callout with **bold text** and a
[link](https://www.mintlify.com) to showcase the color issues.
</Note>
produces the following:
The following css, which is prose styling, is responsible for the issue:
When using callout components (
<Note>
and<Warning>
), the styling of children (<strong>
and<a>
) is being overridden by the prose styles.For example, the following code:
produces the following:
The following css, which is prose styling, is responsible for the issue:
Ideally the colors match the parent callout, for example:
Because custom css is not an option until the pro plan, I am hoping this can be fixed. There are a couple solutions:
prose
class from callouts (and add additional classes to get the same style, if needed)prose
styles directly,.prose :where(strong) { color: inherit; }
prose-${color}
variants to each callout typeI am not sure which would be preferred but I am happy to submit a PR if you would accept!