✨ ⭐ مميز

Emotion

مكتبة CSS-in-JS مرنة (Flexible CSS-in-JS Library)

★ ★ ★ ★ ★ (5/5)

👁️ 4 مشاهدة

📅 02 Jul 2026

⚛️ React 🌐 عام

مستوى الخبرة المطلوب:

🌱 مبتدئ ⚡ متوسط 🚀 محترف 🏢 مؤسسي

🔗 زيارة الموقع الرسمي

★ ★ ★ ★ ★

تقييم المستخدمين

التصنيف ✨ Styling

المشاهدات 4

تاريخ الإضافة 02/07/2026

آخر تحديث 02/07/2026

📋 محتويات الصفحة

📖 الوصف 🎯 يستخدم في ✨ المميزات ⚠️ العيوب 🔄 البدائل 💻 مثال

📖 الوصف

Emotion هي مكتبة CSS-in-JS عالية الأداء تُقدم طريقتين للكتابة: css prop (مثل JSX inline styles) و styled API (مثل Styled-Components). تتميز بمرونة أكثر من Styled-Components وأداء أفضل. Emotion تدعم both framework-agnostic `@emotion/css` و React-specific `@emotion/react`. يُستخدم فيها بشكل واسع مع R...

🎯 يستخدم في

مجالات استخدام هذه الأداة

•

React applications

•

CSS-in-JS مع مرونة

•

Dynamic styles وtheming

•

Applications تستخدم css prop

•

MUI (Material-UI) داخلياً

✨ المميزات

أبرز مميزات هذه الأداة

✓

css prop (inline styles in JSX)

✓

styled API مثل Styled-Components

✓

server-side rendering

✓

TypeScript excellent support

✓

Theming system

✓

Keyframes animations

✓

High performance

✓

Used by Material-UI

⚠️ العيوب

نقاط يجب مراعاتها

Runtime overhead مثل Styled-Components

Bundle size أكبر من zero-runtime

أقل شهرة من Styled-Components قليلاً

يحتاج تعلم الـ APIs

🔄 البدائل

أدوات بديلة يمكنك استخدامها

Styled-Components

Vanilla Extract

Linaria

💻 مثال على الاستخدام

كيفية استخدام هذه الأداة

Example Code

/** @jsxImportSource @emotion/react */
import { css, keyframes } from '@emotion/react';
import styled from '@emotion/styled';

// css prop
function Button() {
  return (
    <button
      css={css`
        background: #3498db;
        color: white;
        padding: 12px 24px;
        border: none;
        border-radius: 4px;
        
        &:hover {
          background: #2980b9;
        }
      `}
    >
      اضغط هنا
    </button>
  );
}

// styled API
const Card = styled.div`
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
`;

// Dynamic styles
const Alert = styled.div(({ severity }) => ({
  padding: '12px 16px',
  borderRadius: '4px',
  background: severity === 'error' ? '#f44336' : '#4caf50',
  color: 'white',
}));

// Keyframes
const fadeIn = keyframes`
  from { opacity: 0; }
  to { opacity: 1; }
`;

const Modal = styled.div`
  animation: ${fadeIn} 0.3s ease;
`;

// Composable styles
const baseStyles = css`
  padding: 16px;
  border-radius: 8px;
`;

const primaryStyles = css`
  ${baseStyles};
  background: #3498db;
  color: white;
`;