What problem does this feature solve?

Currently, all of the internal components used by the DocLayout will completely override the className property. For example, ul will always have "list-disc pl-5 my-4 leading-7". I think it should respect any className it gets from props, and attempt to merge them.

The motivation for this is that I wrote a custom rehype plugin that adds custom classes to MDX elements, but these are stripped away by the components.

What does the proposed API look like?

1. The simplest solution would be to concatenate the props.

export const Ul = (props: ComponentProps<'ul'>) => {
  return <ul {...props} className={`list-disc pl-5 my-4 leading-7 ${props.className}`} />;
};

However, this may add an extra space if there were no classes provided.

2. A nice solution would be to use the common cn utility for merging TailwindCSS classes.

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

export const Ul = (props: ComponentProps<'ul'>) => {
  return <ul {...props} className={cn("list-disc pl-5 my-4 leading-7", props.className)} />;
};

This would require additional packages to be installed, but they are small and might be useful in other places.

3. Finally, it may also be feasible to implement an internal implementation of cn to prevent additional dependencies.

export function cn(...inputs: unknown[]) {
  return inputs.filter(Boolean).join(' ')
}

export const Ul = (props: ComponentProps<'ul'>) => {
  return <ul {...props} className={cn("list-disc pl-5 my-4 leading-7", props.className)} />;
};

If any of these solutions seem acceptable, I can open a corresponding PR.