CSS-in-JS
تحذير: مكتبات CSS-in-JS التي تتطلب تشغيل جافاسكريبت غير مدعومة حاليًا في مكونات الخادم (Server Components). استخدام CSS-in-JS مع ميزات React الجديدة مثل مكونات الخادم والبث يتطلب من مطوري المكتبات دعم أحدث إصدار من React، بما في ذلك التصيير المتزامن (concurrent rendering).
نحن نعمل مع فريق React على واجهات برمجة التطبيقات (APIs) الأساسية للتعامل مع أصول CSS وجافاسكريبت مع دعم مكونات خادم React وهندسة البث.
المكتبات التالية مدعومة في مكونات العميل (Client Components) في دليل app (مرتبة أبجديًا):
chakra-uikuma-ui@mui/material@mui/joypandacssstyled-jsxstyled-componentsstylextamaguitss-reactvanilla-extract
المكتبات التالية تعمل حاليًا على إضافة الدعم:
معلومة جيدة: نحن نختبر مكتبات CSS-in-JS مختلفة وسنضيف المزيد من الأمثلة للمكتبات التي تدعم ميزات React 18 و/أو دليل
app.
إذا كنت تريد تنسيق مكونات الخادم، نوصي باستخدام وحدات CSS أو حلول أخرى تنتج ملفات CSS، مثل PostCSS أو Tailwind CSS.
تكوين CSS-in-JS في app
يتكون تكوين CSS-in-JS من ثلاث خطوات اختيارية تشمل:
- سجل الأنماط (style registry) لجمع جميع قواعد CSS في عملية التصيير.
- خطاف
useServerInsertedHTMLالجديد لحقن القواعد قبل أي محتوى قد يستخدمها. - مكون عميل يلف تطبيقك مع سجل الأنماط أثناء التصيير الأولي من جانب الخادم.
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
}) {
// إنشاء ورقة الأنماط مرة واحدة مع حالة أولية كسولة
// x-ref: 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 }) {
// إنشاء ورقة الأنماط مرة واحدة مع حالة أولية كسولة
// x-ref: 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
}) {
// إنشاء ورقة الأنماط مرة واحدة مع حالة أولية كسولة
// x-ref: 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 }) {
// إنشاء ورقة الأنماط مرة واحدة مع حالة أولية كسولة
// x-ref: 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 لمعرفة المزيد.