How to override literal HTML elements with components.

[michaeloliverx]

I would like to override <kbd> elements and provide a className.

<kbd>CTRL</kbd>

    <MDXComponent
      components={{
        kbd: (props) => <kbd className="bg-gray-300" {...props} />,
      }}
    />

Unfortunately this doesn't seem to work for me.

I would like to keep raw kbd tags in my markdown files as they render nicely in markdown preview: CTRL

This issue looks to be somewhat related but looking for the opposide behaviour. #821

[wooorm]

Currently not possible. #821 was the reason for the change indeed (before, everything could be changed which sometimes didn’t make sense; after, only markdown can be changed, which is sometimes not powerful enough but at least isn’t unexpected).
See also #1770.

• Doesn’t tailwind have a “content” escape hatch to use normal css?
• You can likely type <kbd className="bg-gray-300"> in your MDX, it should work for us and I’m assuming it works for your previewer.
• You could use a rehype plugin to add classes (https://github.com/search?q=rehype+add+classes, or manually combine hast-util-select with hast-util-classnames)

I’m open to solutions in @mdx-js/mdx, but I have a bad feeling about going with an option

[michaeloliverx]

Thanks for the clarification, no worries I can get around it as you said by using normal CSS.