كيفية استخدام مكتبات CSS-in-JS
من الممكن استخدام أي حل CSS-in-JS موجود. أبسطها هو الأنماط المضمنة:
function HiThere() {
return <p style={{ color: 'red' }}>مرحبًا</p>
}
export default HiThereنحن نضمّن styled-jsx لتوفير دعم لأنماط CSS معزولة محدودة النطاق. الهدف هو دعم "ظل CSS" مشابه لمكونات الويب، والتي للأسف لا تدعم التصيير من جانب الخادم وهي تعمل فقط مع JavaScript.
راجع الأمثلة أعلاه للحلول الشائعة الأخرى لـ CSS-in-JS (مثل Styled Components).
يبدو المكون الذي يستخدم styled-jsx كالتالي:
function HelloWorld() {
return (
<div>
مرحبًا بالعالم
<p>محدود النطاق!</p>
<style jsx>{`
p {
color: blue;
}
div {
background: red;
}
@media (max-width: 600px) {
div {
background: blue;
}
}
`}</style>
<style global jsx>{`
body {
background: black;
}
`}</style>
</div>
)
}
export default HelloWorldيرجى مراجعة وثائق styled-jsx لمزيد من الأمثلة.
تعطيل JavaScript
نعم، إذا قمت بتعطيل JavaScript، سيتم تحميل CSS في بناء الإنتاج (next start). أثناء التطوير، نطلب تمكين JavaScript لتوفير أفضل تجربة مطور مع التحديث السريع (Fast Refresh).