どのようにチャクライは、既存のWeb開発スキルを補完する

この記事はもともと私のものになったpersonal website .
多くの異なる反応コンポーネントライブラリが昨年リリースされた.例えばAnt Design , React Bootstrap , MaterialUI . 彼らはすべての戦いは私たちは日々のUI開発で必要なコンポーネントを供給しましたが、それらのどれもチャクラワイとして開発した方法を変更しました.
チャクラは、プレート上の新しいパラダイムをもたらすと同時に、あなたがWeb開発者として、過去10年間に構築したスキルを補完します.

あなたが知っているCSS
CSSをご存知ですか?ああまあ、その後、すでにどのようにChakraui開発を知っている.スタイリングコンポーネントの場合は、それらを知っているように既存のCSSプロパティに1 : 1をマップする小道具を使用してスタイルを作成することができます.

import { Box } from '@chakra-ui/react';

const YourComponent = () => (
  <Box padding={2} border="1px solid black">
    Hello World!
  </Box>
);

これらのプロパティをコンポーネントに適用しているので、Chakrauiはそれらのスタイルを含むCSSクラスを生成します.チャクラは、異なるコンポーネントを提供し、それらの基本的にそれらのスタイルを適用することができます.もちろん、いくつかは特定のタイプに制限されますFlex コンポーネント.
すべての既知のCSSプロパティに加えて、Chakrauiはあなたのコードの読みやすさを高めるためにCSSプロパティにマップするいくつかの省略形を与えます.例えばw マップwidth , m マップmargin , pos マップposition など.この動画を見るlist of all available style props チャクラにて.

JSにおける接近可能なCSS
正直なところ、私はJS解決で既存のCSSで決して快適でないと感じていて、常に文書を終えましたless 対応するコンポーネントのスタイルを保持したファイル.私は、私が彼らに深く怠惰な潜水であって、利益を見て、それがそれらの解決の欠点であると思いません.それにもかかわらず、チャクラはこれを変えました.
それは、あなたのコンポーネントのスタイルの単一の要素のいずれか、または別のスタイルのスタイルを拡張する新しいコンポーネントを作成するのは、風の良い作曲性です.あなたの自由は無限です.

擬似スタイリング
今すぐあなたが思う:擬似スタイルとは何ですか?あなたは、ホバーまたはあなたの所望の要素の集中状態にスタイルをしたいですか?チャクラはもちろん、この1つをバックアップします.

<Box _hover={{ bg: 'red.500' }}>Hello World!</Box>

のようなプロパティで_hover or _focus あなたは、上記のスタイリング小道具で対応する状態をスタイルすることができます.擬似スタイルのドキュメントを見つけることができますhere .
また、チャクラは、グループ化された要素の場合に擬似スタイリングを使用するための基本的な機能を提供しています.それはすべてのusecase(例えば入れ子にされたグループ)をカバーしません、しかし、大部分の時間の大きな仲間で、あなたのコードをきれいで単純にしておきます.

<Box role="group">
  <Box _hover={{ fontWeight: 'semibold' }} _groupHover={{ color: 'tomato' }}></Box>
</Box>

敏感なスタイル
過去数年間では、“モバイルファースト”アプローチは多くの攻撃を得た.多くのユーザーとして合法的に異なるデバイスサイズでWebサーフィンしている.それでは、チャクラはどのように我々を助けますか?

<Box m={{ base: 2, sm: 4, md: 6, lg: 8 }}>Hello World!</Box>

スタイルの小道具のほとんどは、異なるデバイスのサイズの値を指定することができます.チャクラもMobe最初のアプローチに従います.なぜなら、最小の指定されたブレークポイントのスタイルは上記のすべてのブレークポイントにも適用されるからです.
チャクラとはdefault defined breakpoints , しかし、あなたのニーズを満たすためにそれらを調整することができます.
短縮メソッドとして、昇順値を持つ配列として渡すこともできます.これはコードを減らすかもしれませんが、また、readablityを減らすことができて、ブレークポイントを間に残す可能性を取り除きます.以下のコードと同じコードです.

<Box m={[2, 4, 6, 8]}>Hello World!</Box>

柔軟なテーマ
ちょうど調整されたブレークポイントについて話したので、他のものを調整することについて話しましょう.すべてのコンポーネントライブラリの問題がある、それは人気の成長として、それは設計されて摩耗を取得します.私は、すべての第3のwebappが標準的なブートストラップ観察をしたとき、我々の誰でも覚えていると思います.幸いにも、それは柔軟なテーマのアプローチでチャクラの外観と感じを調整することができます.
ここでは、このブログのデフォルトチャクラテーマを調整する方法を示します

import { ButtonProps, extendTheme } from '@chakra-ui/react';
import { mode } from '@chakra-ui/theme-tools';

const ButtonNavVariant = (props: ButtonProps) => ({
  _hover: {
    bg: mode('blackAlpha.200', 'whiteAlpha.200')(props),
    textDecor: 'none',
  },
});

const customTheme = extendTheme({
  styles: {
    global: {
      html: {
        scrollBehavior: 'smooth',
      },
      'html, body': {
        overflowX: 'hidden',
        w: '100%',
        h: '100%',
      },
    },
  },
  fontSizes: {
    '3xl': '2em',
  },
  lineHeights: {
    shorter: '1.2em',
  },
  components: {
    Button: {
      variants: {
        nav: ButtonNavVariant,
      },
    },
    IconButton: {
      variants: {
        nav: ButtonNavVariant,
      },
    },
  },
});
export default customTheme;

この方法でグローバルスタイルを適用することができるだけでなく、デフォルトのような他のものを調整することもできますfontSizes , lineHeights また、内部チャクラのコンポーネントのためのスタイル.私は本当にそれがどのように柔軟性が大好きです.
チェックアウトdocumentation of the default theme すべてpossibilities for customization .

チャクラファクトリー
ので、チャクラコンポーネントの既定の外観を変更するのは涼しいですが、コンポーネントの既定のスタイルを変更する必要はありませんが、元のものにいくつかの調整を新しいコンポーネントを作成する場合はどうですか?
ここでは、チャクラ工場救助、非常に強力なツールに来る!

import { chakra, Box } from '@chakra-ui/react';

const MyBox = chakra(Box, {
  baseStyle: {
    bg: 'papayawhip',
    color: 'red.500',
  },
});

// use the newly created component anywhere in your code
<MyBox />;

この例では、既存のチャクラコンポーネントをファクトリ関数に渡し、basestylesを適用できます.
クールなことは、既存のチャクラコンポーネントを調整するだけでなく、標準的なHTML要素のようなものですdiv , input , span , など、あなたがチャクラ工場でこれらの要素をスタイリングしている場合は、彼らはまた、後にスタイルの小道具で調整するスーパーパワーを持っている.これは本当に素晴らしいです🎉

import { chakra } from '@chakra-ui/react';

const MyDiv = chakra('div', {
  baseStyle: {
    bg: 'papayawhip',
    color: 'red.500',
  },
});

// the newly created component now also has superpowers
<MyDiv margin={2} />;

スタイリングネスト要素
また、あなたが「チャクラ方法」でスタイルを整えるのに手を伸ばすスタイル入れ子の要素を持たなければならない特別なusecaseをカバーしましょう.例として、Image コンポーネントNext.js .
次のコンポーネントのスタイル設定方法を考えます.

import Image from 'next/image';

<Image src="yourimage.png" width={200} height={100} style={{ margin: '20px' borderRadius: '10px' }} />

しかし、それは我々がそれが好きである方法でありません?我々は、デバイスのサイズに応じて別の余白を定義するなど、チャクラとスタイルをしたい.見てみましょうsx チャクラ、別の強力なツールのプロパティ.

import Image from 'next/image';
import { Box } from '@chakra-ui/react';

<Box sx={{ img: { margin: { base: '20px', md: '30px', lg: '40px' }, borderRadius: '10px' } }}>
  <Image src="yourimage.png" width={200} height={100} />
</Box>;

とsx プロパティを使用すると、基本的にネストされた要素をスタイルできます.ちょうど正しいCSSセレクタを適用します.セレクターであってもdiv > img.className ここで可能です.
また、CakrauiによってネイティブにサポートされていないCSSのプロパティに役立ちます.ここでの例を見ることができますstyling scrollbars and specific WebKit properties .

アクセシビリティ
言及するもう一つのものすごいものは、チャクラが心でアクセシビリティが付属しているということです.Chakrauiによって提供されているすべてのコンポーネントには、アクセシビリティがあります.
WebAppsは可能な限りアクセス可能である必要がありますので、これはあなたのwebappを開発を開始するための素晴らしい前提条件です.

フレーマー運動
バージョン1以来、チャクラは、デフォルトのアニメーションライブラリとしてフレーマーの動きが付属しています.チャクラのコンポーネントは、アニメーションのframerモーションを使用しており、また、あなたのアプリケーションを通して、カスタムアニメーションのためにそれを使用することをお勧めします.
フレアーモーションチェックアウトの詳細についてはofficial docs またはintegration example チャクラ.フレマーの動きは素晴らしいアニメーションライブラリであり、私はそれをよく見ていることをお勧めすることができます.

ダークモードの深い統合サポート
ダークモードはますます採用されている.ウェブだけでなく、いくつかのオペレーティングシステムでも.また、あなたのウェブアプリケーションでダークモードをサポートする場合は、チャクラは、それに深く統合されたサポートを持っていることを知って満足しているでしょう.
チャクラはまた、ローカルストレージ内のいずれか、またはサーバー側のレンダリングに役立つクッキーとして、ユーザーの決定を保存するのに役立ちます.また、ユーザーのOSの設定を検出することができます.
スタイルにいくつかのユーティリティがありますか、現在のカラーモードに応じてあなたのアプリケーションを調整します.

役に立つフック
チャクラも便利に来るいくつかのフックがあります.例えば、私は自分自身をuseColorModeValue 現在のカラーモードに応じて値を提供することが非常に多い.
このようなフックもありますuseClipboard and useMediaQuery これは、プロジェクトの他の依存関係の一部を廃止することができます.

恐ろしいコミュニティ
コミュニティは、フレームワーク/ライブラリの大部分です、そして、私はチャクラのまわりのコミュニティがちょうどものすごいと言うことができます.人々は友好的であり、あなたを助けたい.チェックアウトChakra GitHub Discussions 質問があれば.
私もTwitterの友人が新しいプロジェクトを作成したことに言及したいChakra Templates . 応答チャクラのUIの成長のコレクションは、あなたのプロジェクトにドロップする準備ができてテンプレート.

私が反応を使わないならば、どうですか?
少なくとも、私は公式にも公式であるとあなたに言いますChakra version for Vue .

概要
うまくいけば、Chakraui有用なこの短い概要を見つける.Web開発における既存のアプローチをどのように補完し、良いパラダイムと有用なユーティリティでそれらを拡張するかを示したかった.