3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-22 05:27:00 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): add unique page/wrapper className to each theme pages (#4511)

Browse source 
* chore: add theme classnames for blog pages

* fix: component syntax error in blog pages

* style: fix camelcase issue with theme class names

* chore: add theme classnames for doc page and mdx page

* chore: make wrapper classnames in blog and doc page into constants

* chore: add main wrapper theme class name for layout component

* fix: change wrong theme classnames and improve naming

* chore: add wrapper theme class name for mdx page

* docs: add docs for theme class names

* docs: use raw-loader to import documentation and add some comments

* docs: provide more detail to comment

* chore: rename ThemeClassname.ts to ThemeClassName.ts

Co-authored-by: Lisa Chandra <52909743+lisa761@users.noreply.github.com>
Co-authored-by: Javid <singularity.javid@gmail.com>
This commit is contained in:
Steven Hansel 2021-04-15 23:36:40 +07:00 • committed by GitHub
parent db79d462ab
commit cd47d8a815
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 67 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

12
website/docs/styling-layout.md
View file

@ -101,6 +101,18 @@ function MyComponent() {
}
```
#### Theme Class Names
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';
<CodeBlock className="language-ts">
{ThemeClassNamesCode
.replace(/\/\*[\s\S]*?\*\/|\/\/.*/g,'')
.trim()}
</CodeBlock>
### CSS modules {#css-modules}
To style your components using [CSS Modules](https://github.com/css-modules/css-modules), name your stylesheet files with the `.module.css` suffix (e.g. `welcome.module.css`). webpack will load such CSS files as CSS modules and you have to reference the class names from the imported CSS module (as opposed to using plain strings). This is similar to the convention used in [Create React App](https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet).