CSS-in-JS के तरीके
CSS-in-JS अपने styles को अलग .css files के बजाय अपनी JavaScript files के अंदर लिखने के approaches का एक general नाम है, ताकि एक component और इसका look साथ रहें।
In this page:
Syntax
const styleObject = {
propertyName: "value", // camelCase
backgroundColor: "lightblue",
};
<div style={styleObject}>Content</div>
<div style={{ color: isActive ? "red" : "black" }}>Content</div>सबसे Simple Form: Inline style Objects
React का built-in style prop एक plain JavaScript object accept करता है, property names camelCase में CSS के kebab-case के बजाय (background-color के बजाय backgroundColor)। यह CSS-in-JS का सबसे basic form है, जिसे किसी extra library की ज़रूरत ही नहीं।
Note:
Style object को एक अलग variable के रूप में define करें (या component के बाहर) एक couple properties से ज़्यादा किसी भी चीज़ के लिए, JSX को readable रखने के लिए।
Warning:
style prop के ज़रिए inline styles hover states, media queries, या pseudo-elements express नहीं कर सकते — उनके लिए, आपको एक real CSS-in-JS library चाहिए।
उदाहरण: The Simplest Form: Inline style Objects
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
const boxStyle = { padding: "16px", backgroundColor: "lightblue", borderRadius: "8px" };
return <div style={boxStyle}>Styled with an inline object</div>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Props के आधार पर Dynamic Inline Styles
चूंकि style object सिर्फ JavaScript है, इसकी values props या state से dynamically compute की जा सकती हैं, एक component की appearance data के आधार पर बदलने देते हुए, हर possible variation के लिए अलग CSS classes की ज़रूरत के बिना।
Note:
यह एक quick तरीका है छोटी संख्या में dynamic values (जैसे एक progress bar की width) handle करने का बिना एक पूरी CSS-in-JS library लाए।
Warning:
कई conditional style variations के लिए, एक style object के अंदर ternaries का बढ़ता हुआ ढेर पढ़ना मुश्किल हो जाता है — उस point पर className-based approaches पर विचार करें।
उदाहरण: Dynamic Inline Styles Based on Props
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function ProgressBar({ percent }) {
return (
<div style={{ width: "200px", background: "#eee" }}>
<div style={{ width: percent + "%", background: "green", height: "10px" }} />
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<ProgressBar percent={60} />);
</script>
</body>
</html>एक Full CSS-in-JS Library कब उपयोग करें
Inline style objects छोटे, simple cases के लिए ठीक हैं, लेकिन वे hover/focus states, animations, या media queries express नहीं कर सकते। styled-components या Emotion जैसी Libraries इस gap को भरती हैं, real CSS syntax (pseudo-selectors सहित) देते हुए styles को components के साथ colocated रखते हुए।
Note:
अगर आप style prop के अंदर ':hover' या '@media' चाहते हैं और एक wall से टकरा रहे हैं, यह signal है एक dedicated library के लिए reach करने का।
Warning:
सिर्फ एक hover effect के लिए पूरी CSS-in-JS library add करना overkill हो सकता है — plain CSS या CSS Modules भी बिना extra dependencies के hover states express कर सकते हैं।
उदाहरण: When to Reach for a Full CSS-in-JS Library
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// Inline style objects CAN'T do this:
// '&:hover': { background: 'darkblue' } -- not supported by the style prop
// Libraries like styled-components CAN:
// const Btn = styled.button`&:hover { background: darkblue; }`;
function App() {
return <p>See react-styled-components for the full hover-capable example.</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- यह मान लेना कि CSS-in-JS का मतलब सिर्फ styled-components है — यह inline style objects, styled-components, Emotion, और others सहित एक broader category है।
- Plain inline style objects में camelCase incorrectly उपयोग करना (यह backgroundColor है, background-color नहीं)।
- यह न realize करना कि inline style objects (React का built-in style prop) hover/media-query states express नहीं कर सकते, full CSS-in-JS libraries के विपरीत।
चैप्टर सारांश
- CSS-in-JS styles को JavaScript के रूप में लिखने के कई approaches describe करता है, components के साथ colocated।
- सबसे simple form React का built-in style prop है, camelCased properties वाला एक plain JS object लेते हुए।
- styled-components या Emotion जैसी Full libraries pseudo-selectors, theming, और ज़्यादा के लिए support add करती हैं।
- सही choice project की needs पर depend करती है — simple one-offs के लिए inline styles, पूरे design system के लिए एक library।
ब्राउज़र सपोर्ट
React का inline style prop को किसी install की ज़रूरत नहीं; styled-components/Emotion जैसी libraries को npm install चाहिए।
🔒
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: