Wrap Storybook MDX docs in a decorator to conditionally load docs-only CSS

docs.css

/* .storybook/docs.css */
/* Your custom docs-only styles here */

preview.tsx

// .storybook/preview.tsx
const preview = {
	// ...other preview config here
	docs: {
		inlineStories: false, // put stories into an iframe
		// The preview.decorators array does not apply to MDX files, but we can wrap them in decorators here
		container: ({ children, context }) => withDocsStylesMaybe(() => (
			<DocsContainer context={context}>
				<div className="sb-unstyled" data-typography-mode="docs">
					{children}
				</div>
				</DocsContainer>
			), context)
		},
	}
}

withDocsStylesMaybe.tsx

// .storybook/decorators/withDocsStylesMaybe.tsx
export const withDocsStylesMaybe = (Story, context) => {
    if(context?.channel?.data?.storySpecified?.[0]?.viewMode === 'docs') {
        // it is actually there, dunno why TypeScript is confused
        // @ts-expect-error TS2307: Cannot find module ../docs.css or its corresponding type declarations.
        import('../docs.css').then((result) => {
            // do nothing
        }).catch((error) => {
            console.error('Error loading docs.css:', error);
        });
    }

    return <Story />;
}