كيفية استخدام مكتبات CSS-in-JS
تحذير: استخدام CSS-in-JS مع ميزات React الجديدة مثل مكونات الخادم (Server Components) والبث (Streaming) يتطلب من مؤلفي المكتبات دعم أحدث إصدار من React، بما في ذلك التصيير المتزامن (concurrent rendering).
المكتبات التالية مدعومة في مكونات العميل (Client Components) داخل دليل app (مرتبة أبجديًا):
ant-designchakra-ui@fluentui/react-componentskuma-ui@mui/material@mui/joypandacssstyled-jsxstyled-componentsstylextamaguitss-reactvanilla-extract
المكتبات التالية تعمل حاليًا على إضافة الدعم:
معلومة مفيدة: نحن نختبر مكتبات CSS-in-JS مختلفة وسنضيف المزيد من الأمثلة للمكتبات التي تدعم ميزات React 18 و/أو دليل
app.
تكوين CSS-in-JS في app
تكوين CSS-in-JS هو عملية اختيارية من ثلاث خطوات تتضمن:
- سجل الأنماط (style registry) لجمع جميع قواعد CSS أثناء التصيير.
- خطاف
useServerInsertedHTMLالجديد لحقن القواعد قبل أي محتوى قد يستخدمها. - مكون عميل (Client Component) يلف تطبيقك مع سجل الأنماط أثناء التصيير الأولي من جانب الخادم.
styled-jsx
استخدام styled-jsx في مكونات العميل يتطلب استخدام الإصدار v5.1.0. أولاً، أنشئ سجلًا جديدًا:
'use client'
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
export default function StyledJsxRegistry({
children,
}: {
children: React.ReactNode
}) {
// إنشاء ورقة الأنماط مرة واحدة مع حالة أولية كسولة
// مرجع: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
const [jsxStyleRegistry] = useState(() => createStyleRegistry())
useServerInsertedHTML(() => {
const styles = jsxStyleRegistry.styles()
jsxStyleRegistry.flush()
return <>{styles}</>
})
return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>
}'use client'
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
export default function StyledJsxRegistry({ children }) {
// إنشاء ورقة الأنماط مرة واحدة مع حالة أولية كسولة
// مرجع: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
const [jsxStyleRegistry] = useState(() => createStyleRegistry())
useServerInsertedHTML(() => {
const styles = jsxStyleRegistry.styles()
jsxStyleRegistry.flush()
return <>{styles}</>
})
return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>
}ثم، لف تخطيط الجذر (root layout) بالسجل:
import StyledJsxRegistry from './registry'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html>
<body>
<StyledJsxRegistry>{children}</StyledJsxRegistry>
</body>
</html>
)
}import StyledJsxRegistry from './registry'
export default function RootLayout({ children }) {
return (
<html>
<body>
<StyledJsxRegistry>{children}</StyledJsxRegistry>
</body>
</html>
)
}Styled Components
فيما يلي مثال لكيفية تكوين styled-components@6 أو أحدث:
أولاً، تمكين styled-components في next.config.js.
module.exports = {
compiler: {
styledComponents: true,
},
}ثم، استخدم واجهة برمجة تطبيقات styled-components لإنشاء مكون سجل عام لجمع جميع قواعد أنماط CSS التي تم إنشاؤها أثناء التصيير، ووظيفة لإرجاع تلك القواعد. ثم استخدم خطاف useServerInsertedHTML لحقن الأنماط المجمعة في السجل داخل وسم <head> HTML في تخطيط الجذر.
'use client'
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
export default function StyledComponentsRegistry({
children,
}: {
children: React.ReactNode
}) {
// إنشاء ورقة الأنماط مرة واحدة مع حالة أولية كسولة
// مرجع: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
useServerInsertedHTML(() => {
const styles = styledComponentsStyleSheet.getStyleElement()
styledComponentsStyleSheet.instance.clearTag()
return <>{styles}</>
})
if (typeof window !== 'undefined') return <>{children}</>
return (
<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
{children}
</StyleSheetManager>
)
}'use client'
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
export default function StyledComponentsRegistry({ children }) {
// إنشاء ورقة الأنماط مرة واحدة مع حالة أولية كسولة
// مرجع: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
useServerInsertedHTML(() => {
const styles = styledComponentsStyleSheet.getStyleElement()
styledComponentsStyleSheet.instance.clearTag()
return <>{styles}</>
})
if (typeof window !== 'undefined') return <>{children}</>
return (
<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
{children}
</StyleSheetManager>
)
}لف children لتخطيط الجذر بمكون سجل الأنماط:
import StyledComponentsRegistry from './lib/registry'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html>
<body>
<StyledComponentsRegistry>{children}</StyledComponentsRegistry>
</body>
</html>
)
}import StyledComponentsRegistry from './lib/registry'
export default function RootLayout({ children }) {
return (
<html>
<body>
<StyledComponentsRegistry>{children}</StyledComponentsRegistry>
</body>
</html>
)
}معلومة مفيدة:
- أثناء تصيير الخادم، سيتم استخراج الأنماط إلى سجل عام وحقنها في
<head>من HTML الخاص بك. هذا يضمن وضع قواعد الأنماط قبل أي محتوى قد يستخدمها. في المستقبل، قد نستخدم ميزة React القادمة لتحديد مكان حقن الأنماط.- أثناء البث، سيتم جمع الأنماط من كل جزء وإضافتها إلى الأنماط الموجودة. بعد اكتمال الترطيب (hydration) من جانب العميل، ستتولى
styled-componentsالمهمة كالمعتاد وحقن أي أنماط ديناميكية إضافية.- نستخدم على وجه التحديد مكون عميل في أعلى مستوى من الشجرة لسجل الأنماط لأنه أكثر كفاءة لاستخراج قواعد CSS بهذه الطريقة. يتجنب إعادة إنشاء الأنماط في عمليات تصيير الخادم اللاحقة، ويمنع إرسالها في حمولة مكون الخادم.
- لحالات الاستخدام المتقدمة حيث تحتاج إلى تكوين خصائص فردية لتحويل styled-components، يمكنك قراءة مرجع واجهة برمجة تطبيقات Next.js لـ styled-components لمعرفة المزيد.