Antd v5移行について

Transcript

1. Antd v5移行について 🍬 🐜 🐜 🐜 🐜
2. Remove less, adopt CSS-in-JS
3. v5 から「コンポーネントレベルのCSS-in-JS」を採用 一般的なCSS-in-JSでは、<style>タグが挿入(シリアライズ)されたかを識別するのに、ハッシュ値を使用する。 よく挙げられるCSS-in-JSの問題点として、コンポーネントに渡したpropsの変更に伴ってスタイルも変更されることでハッシュ値 の再計算が高頻度に行われてパフォーマンスに影響ができること。(ライブラリとブラウザの二重解析) 各種ライブラリではこれらに対処する様々なアプローチを持っている。ex: ゼロランタイムCSS-in-JS antdは前提としてpropsの変更がコンポーネントのスタイルに影響を与えることはない。スタイルの変更が起きるのは1. テーマ 変数(Token)の変更 2. antdのバージョン(Version)変更　の場合のみ。それ以外はスタイルは最初のマウント時に一度だけ生成 され、必要なスタイルはキャッシュから与えられる。
4. 補足: 一般的なCSS-in-JSのメリット・デメリット メリット ・ダイナミックなスタイリング ・Javascriptの開発体験の向上 ・コンポーネントに閉じたスタイル ・スタイル変更の自由度 ・CSSの静的解析(クラス名指定間違いが減る ) デメリット ・パフォーマンス 　(ライブラリによるstyle生成とブラウザ解析の　 二 重解析) ・可読性が悪い ・クラス名がハッシュ化されて読めない ・スタイル記法がライブラリに依存する
5. v5 の主要概念 Design Token…テーマやコンポーネント全体のスタイルに影響を与える最 小要素 ・Seed Token…デザイン意図の基本単位 ・Map Token…Seed Tokenから派生したベースになるトークン ・Alias Token…Map Tokenから派生したコンポーネント向けトークン Algorithm…Seed TokenからMap Tokenへ派生させる際の計算方式 (計算方式を変えて、ダークモードやコンパクトモードを扱える) ConfigProvider…antdのコンポーネントを扱えるようにする v4と異なる点はthemeを渡せるようになったこと ただし、注意点としてmessage.xxxやModal.xxxやnotification.xxxにはこれ らで設定したスタイルが適用されない。 => AppコンポーネントとApp.useAppを使う
6. CSS の書き方
7. 基本の書き方 const useStyles = createStyles(({ token, css }) => { return { button: css` padding: ${token.padding}px ` }; }); const TestButton: React.FC = observer(() => { const { styles, theme } = useStyles(); return ( <Button className={styles.button} /> ) }) 各コンポーネントファイルでcreateStyleを使って userStylesを定義。 コンポーネント内でuseStylesを使用して、stylesを取得して classNameに割り当てる。 userStylesの定義時にはなるべくtokenを使う。 https://ant.design/docs/react/customize-theme#api less時代の@padding-smがtoken.paddingSMに変更されたとい うイメージでOK。(less変数はdesign tokenへ) tokenを使うことで、ダークモードやコンパクトモードで余計なデザ イン調整を挟まずに済む。
8. less時代の :global (局所カスタマイズ)について less時代に:globalで指定してantdコンポーネントのクラス名を指定してオーバーライドしていた部分はそのまま指定したクラス内 で指定できるようになった。 以前のように「:globalを追加して...」という手間が減ったので、少しは楽になったかも。 .inactiveMenu { :global { .ant-menu-item-icon { opacity: 0.4; } } } const useStyles = createStyles(({ token, css }) => { return { inactiveMenu: css` .ant-menu-item-icon { opacity: 0.4; } `, } } Before(SideMenu.module.less) After(SideMenu.tsx)
9. メディアクエリーや擬似要素の取り扱い CSSで指定できるメディアクエリや擬似要素については、 基本的にCSS Nesting Moduleを活用してuseStyles内部で定義したクラスの中で指定するようにしましょう。 const useStyles = createStyles(({ token, css }) => { return { content: css` padding: 32px 48px; @media screen and (max-width: ${token.screenSMMax}px) { padding: 32px 0px; } ` }; }); .content { padding: 32px 48px; } @media screen and (max-width: @screen-sm-max) { .content { padding: 32px 0; } } CSS Nesting Moduleが使えるようになっていたのは最近だった。https://www.w3.org/TR/css-nesting-1/ https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector
10. つづき(擬似要素の例) .newDate { font-size: @font-size-sm; } .newDate::before { content: 'New'; margin-right: @margin-xs; color: @white; backgrounds: @primary-color; padding: 1px @padding-xss; font-style: italic; } const useStyles = createStyles(({ token, css }) => { return { newDate: css` font-size: ${token.fontSize}px; &::before { content: 'New'; margin-right: ${token.marginXS}px; color: ${token.colorWhite}; background: ${token.colorPrimary} !important; padding: 1px ${token.padding Spx; font-style: italic; } ` }; });
11. createStylesじゃなくてコンポーネント内でtokenを使う 場合によっては、classNameではなくコンポーネント内のstyleなどに直接スタイルを定義しに行く場合もあり得るので その場合はtheme.useTokenを使う。 import { theme, Typography } from 'antd'; const TestComponent: React.FC = observer(() => { const { token } = theme.useToken(); return ( <Typography.Text style={{ fontSize: token.fontSizeLG }}> Hello </Typography.Text> ); } 補足: useStylesからも const { styles, theme } = useStyles(); で抽出できるので、どちらがいいかはよくわかっていない...
12. 移行における残課題
13. 静的関数内での局所カスタマイズの方法は？ message.xxxやModal.xxxやnotification.xxxなどでantdのクラス名を直接styleする指定方法がよくわからない... LwModal.confirm({ ... okButtonProps: { style: { width: '48%', }, }, cancelButtonProps: { style: { width: '48%', }, }, style: ... //??? ... })
14. TypescriptとNext.jsの最新バージョンへの移行まとめ 今現在のバージョンに変更による影響についてどういう事象が起きているかをまとめておく。 ・Typescript v4 > v5への移行 babel(next/babel)でコンパイルすると、satisfiesを使おうとするとNext.jsでエラーが出てしまう。 対応策: babelの代わりにswcコンパイラを使う ・babelの設定を削除して、nextjsのswcコンパイラを使う Mobxの挙動が変わる(クラスのプロパティがundefinedになる) 対応策: tsconfig.jsonのuseDefineForClassFieldsをtrueにする必要があった。 ・Next.js v13.4.7 > v13.5.3 受け渡すtokenがデフォルトのテーマのままでカスタムしたテーマのtokenが有効にならない ・package-lock.jsonを削除して、新たに再生成する クエリ文字列の渡し方で400エラーになる。(swrなどのapiクライアントの挙動が変わったみたい?)