CSS Academy · पाठ

Emotion: css() और styled()

Emotion के css() सहायक और styled() घटक फ़ैक्टरी से गतिशील शैलियाँ लागू करें।

पाठ 2, कुल 4 में से13 चरण

Emotion: css() और styled(), CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Emotion क्या है?

Emotion एक लचीले API वाली CSS में JavaScript लाइब्रेरी है। यह दो मुख्य तरीके उपलब्ध कराती है: css() फ़ंक्शन (फ़्रेमवर्क-निरपेक्ष) और styled() API (styled-components के समान)। दोनों अपने-आप सीमित दायरे वाले class नाम बनाते हैं।

Emotion इंस्टॉल करना

आपकी आवश्यकताओं के आधार पर दो पैकेज उपलब्ध हैं:

npm install @emotion/react    # css prop and Global
npm install @emotion/styled   # styled() API
npm install @emotion/css      # framework-agnostic

css() फ़ंक्शन

css() फ़ंक्शन CSS ऑब्जेक्ट या टेम्पलेट लिटरल से class नाम बनाता है:

import { css } from '@emotion/css';

const buttonStyle = css`
  background: royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
`;

function Button({ children }) {
  return <button className={buttonStyle}>{children}</button>;
}

css() के साथ CSS ऑब्जेक्ट

ऑब्जेक्ट सिंटैक्स टेम्पलेट लिटरल का एक विकल्प है — यह TypeScript के ऑटो-कम्प्लीशन के लिए उपयोगी है:

const cardStyle = css({
  background: 'white',
  borderRadius: '8px',
  padding: '24px',
  boxShadow: '0 4px 16px rgba(0,0,0,0.1)'
});

styled() API

इनके बीच माइग्रेट करने के लिए Emotion का styled, styled-components की तरह ही काम करता है:

import styled from '@emotion/styled';

const Card = styled.div`
  background: white;
  border-radius: 8px;
  padding: 24px;
`;

const FeaturedCard = styled(Card)`
  border: 2px solid gold;
`;

css प्रॉप (इनलाइन स्टाइलिंग)

Emotion का css प्रॉप आपको सीधे JSX एलिमेंट पर स्टाइल लिखने देता है — किसी अतिरिक्त कंपोनेंट की आवश्यकता नहीं होती। इसके लिए @emotion/react पैकेज और Babel/SWC प्लगइन आवश्यक है:

/** @jsxImportSource @emotion/react */

function Component() {
  return (
    <div css={{ background: 'white', padding: '24px' }}>
      Content
    </div>
  );
}

Emotion के साथ डायनेमिक स्टाइल

दोनों API डायनेमिक मानों के लिए प्रॉप्स प्राप्त करने वाले फ़ंक्शन स्वीकार करते हैं:

const Badge = styled.span`
  background: ${({ variant }) => variant === 'error' ? 'crimson' : 'royalblue'};
  color: white;
  padding: 2px 8px;
  border-radius: 9999px;
`;

ग्लोबल स्टाइल

ग्लोबल CSS के लिए @emotion/react से Global का उपयोग करें:

import { Global, css } from '@emotion/react';

function App() {
  return (
    <>
      <Global styles={css`
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; }
      `} />
    </>
  );
}

Emotion और styled-components की तुलना

Emotion और styled-components के API लगभग एक जैसे हैं। बेंचमार्क में Emotion का प्रदर्शन थोड़ा बेहतर है, इसका बंडल आकार छोटा है और अतिरिक्त API के रूप में css प्रॉप भी उपलब्ध है। React ऐप्स के लिए दोनों ही उत्पादन में आज़माए और भरोसेमंद विकल्प हैं।

Emotion में कीफ़्रेम

keyframes हेल्पर से ऐनिमेशन परिभाषित करें:

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

const bounce = keyframes`
  from { transform: translateY(0); }
  to   { transform: translateY(-20px); }
`;

const animated = css`
  animation: ${bounce} 1s ease-in-out infinite alternate;
`;

सर्वर-साइड रेंडरिंग

Emotion, React के Next.js जैसे फ़्रेमवर्क में सर्वर रेंडरिंग के दौरान महत्वपूर्ण CSS एकत्र करने और जोड़ने के लिए extractCriticalToChunks() के माध्यम से SSR का समर्थन करता है।

त्वरित जाँच

Emotion के css() फ़ंक्शन और उसके styled() API के बीच मुख्य अंतर क्या है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

Emotion दो मुख्य स्टाइलिंग API उपलब्ध कराता है: css() class नाम बनाता है (इन्हें className के माध्यम से लागू करें), जबकि styled() स्टाइल किए गए React कंपोनेंट बनाता है। css प्रॉप, पूरी CSS क्षमता के साथ इनलाइन-स्टाइल जैसा लेखन संभव बनाता है। Emotion, styled-components के API के साथ अत्यधिक संगत है और अक्सर अधिक तेज़ होता है। दोनों तरीके बनाए गए class नामों के माध्यम से स्टाइल को अपने-आप सीमित दायरे में रखते हैं।

शुरुआत निःशुल्क

एआई शिक्षक के साथ CSS सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Emotion: css() और styled()” पाठ निःशुल्क है?

हाँ—“Emotion: css() और styled()” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Emotion: css() और styled()” में मैं क्या सीखूँगा?

Emotion के css() सहायक और styled() घटक फ़ैक्टरी से गतिशील शैलियाँ लागू करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“Emotion: css() और styled()” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← CSS Academy पर वापस जाएँ