Estilo e Layout

CSS tradicional

Se estiver usando @docusaurus/preset-classic, você pode criar seus próprios arquivos CSS (por exemplo, /src/css/custom.css) e importá-los globalmente passando como uma opção na predefinição.

docusaurus.config.js

module.exports = {  // ...  presets: [    [      '@docusaurus/preset-classic',      {        theme: {          customCss: [require.resolve('./src/css/custom.css')],        },      },    ],  ],};

Qualquer CSS que você escrever nesse arquivo estará disponível globalmente e pode ser referenciado diretamente usando strings literais. Esta é a abordagem mais tradicional para escrever CSS e é adequada para pequenos sites que não têm muita personalização.

Estilizando seu site com Infima

@docusaurus/preset-classic usa Infima como um framework de estilo. A Infima fornece layout flexível e estilos de componentes UI comuns adequados para sites focados no conteúdo (blogs, documentação, landing pages). Para obter mais detalhes, confira o site da Infima.

Quando você inicia seu projeto Docusaurus 2, o site será gerado com folhas de estilo e estilo padrão de Infima. Você pode personalizar o estilo editando o arquivo /src/css/custom.css.

/src/css/custom.css

/** * You can override the default Infima variables here. * Note: this is not a complete list of --ifm- variables. */:root {  --ifm-color-primary: #25c2a0;  --ifm-color-primary-dark: rgb(33, 175, 144);  --ifm-color-primary-darker: rgb(31, 165, 136);  --ifm-color-primary-darkest: rgb(26, 136, 112);  --ifm-color-primary-light: rgb(70, 203, 174);  --ifm-color-primary-lighter: rgb(102, 212, 189);  --ifm-color-primary-lightest: rgb(146, 224, 208);  --ifm-code-font-size: 95%;}

Infima usa 7 tonalidades de cada cor. Recomendamos usar o ColorBox para encontrar os diferentes tons de cores para a cor principal escolhida.

Como alternativa, use a seguinte ferramenta para gerar os diferentes tons de seu site e copiar as variáveis para /src/css/custom.css.

Primary Color:

CSS Variable Name	Hex	Adjustment
--ifm-color-primary-lightest	#80aaef
--ifm-color-primary-lighter	#5a91ea
--ifm-color-primary-light	#4e89e8
--ifm-color-primary	#3578e5	0
--ifm-color-primary-dark	#1d68e1
--ifm-color-primary-darker	#1b62d4
--ifm-color-primary-darkest	#1751af

Replace the variables in src/css/custom.css with these new variables.

--ifm-color-primary: #3578e5;--ifm-color-primary-dark: #1d68e1;--ifm-color-primary-darker: #1b62d4;--ifm-color-primary-darkest: #1751af;--ifm-color-primary-light: #4e89e8;--ifm-color-primary-lighter: #5a91ea;--ifm-color-primary-lightest: #80aaef;

Modo Escuro

Para personalizar as variáveis do Infima para o modo escuro, você pode adicionar o seguinte a src/css/custom.css.

/src/css/custom.css

html[data-theme='dark'] {  --ifm-color-primary: #4e89e8;  --ifm-color-primary-dark: #5a91ea;  /* any other colors you wish to overwrite */}

Abordagens de estilo

Um site Docusaurus é uma aplicação React de uma única página. Você pode estilizá-lo da mesma forma que estiliza os aplicativos React.

Há algumas abordagens/frameworks que funcionarão, dependendo das suas preferências e do tipo de site que você está tentando construir. Sites que são altamente interativos e se comportam mais como aplicativos da web se beneficiarão de abordagens de estilo mais modernas que colocam os estilos com os componentes. Estilo de componente também pode ser particularmente útil quando você deseja personalizar ou deslizar um componente.

Estilos globais

Esta é a forma mais tradicional de estilo com que a maioria dos desenvolvedores (incluindo desenvolvedores não-front-end) estaria familiarizado.

Supondo que você esteja usando @docusaurus/preset-classic e /src/css/custom. ss foi passado para a configuração predefinida, estilos dentro desse arquivo estariam disponíveis globalmente.

/src/css/custom.css

.purple-text {  color: rebeccapurple;}

function MyComponent() {  return (    <main>      <h1 className="purple-text">Purple Heading!</h1>    </main>  );}

Nomes de classes de tema

Fornecemos alguns nomes de classes CSS predefinidos para fornecer aos desenvolvedores acesso ao layout de estilo de uma página globalmente no Docusaurus. O objetivo é ter nomes de classes estáveis compartilhados por todos os temas que são destinados a serem direcionados para CSS personalizado.

export const ThemeClassNames = {  page: {    blogListPage: 'blog-list-page',    blogPostPage: 'blog-post-page',    blogTagsListPage: 'blog-tags-list-page',    blogTagsPostPage: 'blog-tags-post-page',    docPage: 'doc-page',    mdxPage: 'mdx-page',  },  wrapper: {    main: 'main-wrapper',    blogPages: 'blog-wrapper',    docPages: 'docs-wrapper',    mdxPages: 'mdx-wrapper',  },};

Módulos CSS

Para estilizar seus componentes usando Módulos CSS, nomeie seus arquivos de folha de estilo com o sufixo .module.css (por exemplo, welcome.module.css). webpack irá carregar esses arquivos CSS como módulos CSS e você tem que referenciar os nomes de classes do módulo CSS importado (em oposição ao uso de strings). Isso é semelhante à convenção usada no Criar aplicativo React.

styles.module.css

.main {  padding: 12px;}
.heading {  font-weight: bold;}
.contents {  color: #ccc;}

import styles from './styles.module.css';
function MyComponent() {  return (    <main className={styles.main}>      <h1 className={styles.heading}>Hello!</h1>      <article className={styles.contents}>Lorem Ipsum</article>    </main>  );}

Os nomes das classes que serão processados pelo webpack em um nome de classe globalmente exclusivo durante a construção.

CSS-in-JS

caution

Esta seção está em progresso. Boas-vindas aos PRs.

Sass/SCSS

Para usar Sass/SCSS como seu pré-processador CSS, instale o plugin não oficial Docusaurus 2 docusaurus-plugin-sass. Este plug-in funciona tanto para estilos globais quanto para a abordagem de módulos CSS:

1. Instale docusaurus-plugin-sass:

npm

npm install --save docusaurus-plugin-sass

Yarn

yarn add docusaurus-plugin-sass

2. Inclua o plugin no seu arquivo docusaurus.config.js:

docusaurus.config.js

module.exports = {  // ...  plugins: ['docusaurus-plugin-sass'],  // ...};

3. Escreva e importe suas folhas de estilo no Sass/SCSS normalmente.

Estilos globais usando Sass/SCSS

Agora você pode definir a propriedade customCss de @docusaurus/preset-classic para apontar para o seu arquivo Sass/SCSS:

docusaurus.config.js

module.exports = {  presets: [    [      '@docusaurus/preset-classic',      {        // ...        theme: {          customCss: [require.resolve('./src/css/custom.scss')],        },        // ...      },    ],  ],};

Módulos usando Sass/SCSS

Nomeie seus arquivos de folha de estilo com o sufixo .module.scss (por exemplo, welcome.module.scss) em vez de .css. Webpack usará sass-loader para pré-processar suas folhas de estilo e carregá-las como módulos CSS.

styles.module.scss

.main {  padding: 12px;
  article {    color: #ccc;  }}

import styles from './styles.module.scss';
function MyComponent() {  return (    <main className={styles.main}>      <article>Lorem Ipsum</article>    </main>  );}