diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css index f5511946c72f..19bfa5fc993c 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css @@ -9,7 +9,7 @@ --doc-sidebar-width: 300px; } -:global(.main-docs-wrapper) { +:global(.docs-wrapper) { display: flex; } diff --git a/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts b/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts index 8f545f7380d9..c4a3f9b090d0 100644 --- a/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts +++ b/packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts @@ -18,7 +18,7 @@ export const ThemeClassNames = { wrapper: { main: 'main-wrapper', blogPages: 'blog-wrapper', - docPages: 'main-docs-wrapper', + docPages: 'docs-wrapper', mdxPages: 'mdx-wrapper', }, }; diff --git a/website/docs/styling-layout.md b/website/docs/styling-layout.md index aadc18c3c9bc..388bc3bad34f 100644 --- a/website/docs/styling-layout.md +++ b/website/docs/styling-layout.md @@ -105,13 +105,18 @@ function MyComponent() { We provide some predefined CSS class names to provide access for developers to style layout of a page globally in Docusaurus. The purpose is to have stable classnames shared by all themes that are meant to be targeted by custom CSS. -import ThemeClassNamesCode from '!!raw-loader!@site/../packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts'; import CodeBlock from '@theme/CodeBlock'; +```mdx-code-block +import ThemeClassNamesCode from '!!raw-loader!@site/../packages/docusaurus-theme-common/src/utils/ThemeClassNames.ts'; + +import CodeBlock from '@theme/CodeBlock'; {ThemeClassNamesCode + // remove source comments .replace(/\/\*[\s\S]*?\*\/|\/\/.*/g,'') .trim()} +``` ### CSS modules {#css-modules}