Styled Components का उपयोग
In this page:
const StyledName = styled.tag`
property: value;
color: ${props => (props.active ? "blue" : "gray")};
&:hover {
property: value;
}
`;
<StyledName active>Content</StyledName>JavaScript में सीधे CSS लिखना
styled-components आपको एक component की styling define करने देता है real CSS syntax के एक tagged template literal का उपयोग करके, जो सीधे एक styled.tagname call से attached है। Result, जैसे StyledButton, एक genuine React component है जिसे आप बिल्कुल किसी और की तरह render करते हैं।
उदाहरण: Writing CSS Directly in JavaScript
// Run in your local React project (npm install required)
import styled from 'styled-components';
const StyledButton = styled.button`
background: blue;
color: white;
padding: 8px 16px;
`;
function App() {
return <StyledButton>Click me</StyledButton>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Dynamic Styling के लिए Props उपयोग करना
Template literal के अंदर, आप एक function embed कर सकते हैं जो component के props receive करता है और एक CSS value return करता है, जिससे वही styled component अलग props दिए जाने पर अलग render हो सके, बिना अलग CSS classes लिखे।
उदाहरण: Using Props for Dynamic Styling
// Run in your local React project (npm install required)
import styled from 'styled-components';
const StyledButton = styled.button`
background: ${props => props.primary ? 'blue' : 'gray'};
color: white;
`;
function App() {
return <StyledButton primary>Primary Button</StyledButton>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Nesting और Pseudo-Selectors
Inline styles के विपरीत, styled-components के template literals real CSS की FULL power support करते हैं, nested selectors और pseudo-classes जैसे &:hover सहित, '&' symbol उपयोग करते हुए component को खुद refer करने के लिए।
उदाहरण: Nesting and Pseudo-Selectors
// Run in your local React project (npm install required)
import styled from 'styled-components';
const StyledButton = styled.button`
background: blue;
&:hover {
background: darkblue;
}
`;
function App() {
return <StyledButton>Hover me</StyledButton>;
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- एक styled component को दूसरे component के render function के अंदर define करना, जो हर render पर इसे recreate करता है (और इसकी कोई भी internal state खो देता है)।
- यह भूल जाना कि styled.div``... एक असली React component बनाता है, किसी और की तरह usable, अपने खुद के props के साथ।
- यह न realize करना कि template-literal CSS full nesting और pseudo-selectors (जैसे &:hover) support करता है, सिर्फ flat properties नहीं।
- styled-components आपको JavaScript template literals के अंदर असली CSS लिखने देता है, एक specific component से attached।
- styled.div
...(या styled.button, styled.p, आदि) एक नया React component return करता है जिसमें वे styles baked in हैं। - Props को template literal के अंदर उपयोग करके styles conditional/dynamic बनाई जा सकती हैं।
- Styled components को module scope पर define किया जाना चाहिए, किसी और component के render के अंदर recreate किए जाने के बजाय।
npm install styled-components चाहिए — इस sandbox में CDN के ज़रिए available नहीं; React 16.8+ के साथ काम करता है।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: