チャクラ散文は、最終的にここにあります

私はチャクラのUIの大ファンです私は長年それを使用している、それは私の行くときには非常に高速なすべてを取得し、行くの基本的なウェブサイトを構築することです.
この問題はTinaCMSやMarkdownのようなものを使用することで標準的な要素として解析されています.例えば、<h1>とチャクラはすべてのスタイリングを上書きし、<Heading as="h1">を使用すると予想しています.これは、2つのオプションを、手動ですべてのスタイルをオーバーライドしたり、HTMLを通過し、チャクラ固有のコンポーネントを送信します.

紹介チャクラ散文

あなたは多分私のサイトは、少し読むときに変更されていることに気づいているサイトは、まともな間隔を持っている、サイズが変更されており、読書の経験はとても良いです.これは、コアメンテナの1つ(https://github.com/nikolovlazar/chakra-ui-prose)からの新しいパッケージのため、これは、<Prose>コンポーネントを使用してサイト上の散文を実装することができます.

チャクラ散文を実行する方法

チャクラ散文を追加するには、まずパッケージをインストールする必要があります.

yarn add @nikolovlazar/chakra-ui-prose
# or
npm i @nikolovlazar/chakra-ui-prose

パッケージをインストールしたら、あなたのチャクラUIアプリケーションを設定する準備が整いました.カスタムテーマを持っていない場合は、Chakra documentationで詳細に読むことができるものを作成する必要がありますが、ここでは基本的なものの例です.

/ theme.js
// 1. Import extend theme
import { extendTheme } from '@chakra-ui/react';
// 2. extend the theme
const theme = extendTheme({})
export default theme;

次に、これをインポートし、次のChakraProviderに渡すことができます.JSは_app.jsにあり、次のようになります.

import { ChakraProvider } from '@chakra-ui/react';
import theme from './theme';
<ChakraProvider theme={theme}>
  <Component {...pageProps} />
</ChakraProvider>

チャクラ散文を追加するには、カスタムテーマに追加する必要があります.まず、withProseをインポートして、それをextendThemeに追加する必要があります

import { extendTheme } from '@chakra-ui/react';
import { withProse } from '@nikolovlazar/chakra-ui-prose';
const theme = extendTheme(
    { config },
    withProse())

export default theme;

今、あなたはアプリケーションが散文の準備ができて、それを使用するには、<Prose>コンポーネントであなたのウェブサイトやアプリケーションの任意の部分をラップすることができます.もちろん、このような場合には、例えば、次のようにチャクラが提供するのと同じ拡張を使用してカスタマイズするために散文テーマを拡張できます.

withProse({
        baseStyle: {
            pre: {
                fontFamily: 'monospace',
                fontSize: '1rem',
                lineHeight: '1.5',
                whiteSpace: 'pre-wrap',
                wordBreak: 'break-word',
                wordWrap: 'break-word',
                overflowWrap: 'break-word',
                overflow: 'auto',
                padding: '0.2rem 0.4rem',
                margin: '0.2rem 0.4rem',
                borderRadius: '0.5rem',
                border: '1px solid #ddd',
                backgroundColor: '#000000',
                border: '1px solid #ccc',
                transition: 'all 0.2s ease-in-out',
                color: '#fff'
            }
        }
    })

これは、元のブログ記事を通して見たカスタムコードブロックを作成します.私はそれが本当に良い標準化された経験を得るために書く必要があるコードの量を減らすように、彼らは最終的には、このためのレシピを作成して喜んでいます.