ReactJS CSS Styling : CSS Styling Methods In ReactJs In Hindi

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

ReactJS में CSS styling एक important aspect है जो आपके components को visually appealing और user-friendly बनाता है।

CSS के अलग-अलग methods का use करके हम React components को style कर सकते हैं, जैसे कि traditional CSS files, inline styles, CSS Modules, और Styled Components.

इस topic में हम देखेंगे कि ReactJS में CSS styling के popular methods कैसे use किये जाते हैं, और उनका syntax और structure कैसे implement होता है।

●●●

CSS Styling Methods In ReactJs

React में CSS styling के कुछ commonly used methods हैं -

• External CSS File - Traditional CSS file को component में import करना।

• Inline Styling - Directly component के अंदर CSS लिखन।

• CSS Modules - Scoped CSS जो सिर्फ specific component पर apply होता है।

• Styled Components - CSS-in-JS library जो components के साथ styled elements बनाता है।

अब हम इन सब methods को detail में देखेंगे।

●●●

ReactJs External CSS Styling

ये traditional CSS method है जिसमे हम एक separate CSS file बनाते हैं और उससे अपने component में import करते हैं. ये method React components को globally style करने के लिए useful होता है।

File : src/components/Button.js

Copy
import React from 'react';
import './Button.css';

function Button() {
  return (
    <button className="primary-button">Click Me</button>
  );
}

export default Button;

File : src/components/Button.css

Copy
.primary-button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
}

Button.js में हमने Button.css को import किया और className attribute के साथ class add किया फिर Button.css में .primary-button class define कि गयी है जो button को style देती है।

●●●

ReactJs Inline Styling

Inline styling का use React में तब होता है जब हम किसी single element को specific style देना चाहें। Inline styles को JavaScript objects के form में लिखते हैं, और CSS properties को camelCase में लिखते हैं।

File : src/components/Card.js

Copy
import React from 'react';

function Card() {
  const cardStyle = {
    backgroundColor: '#f4f4f4',
    padding: '20px',
    borderRadius: '8px',
    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)'
  };

  return (
    <div style={cardStyle}>
      <h2>Inline Styled Card</h2>
      <p>This is a card styled with inline styles.</p>
    </div>
  );
}

export default Card;

cardStyle एक JavaScript object है जो CSS properties को hold करता है। style attribute में directly cardStyle object को pass किया गया है।

Note* Inline styling सिर्फ small styles के लिए useful है, लेकिन ये reuse और maintain करना मुश्किल हो सकता है जब large applications हो।

●●●

ReactJs CSS Modules

CSS Modules एक scoped CSS method है जो CSS classes को component के scope में restrict करता है। ये ensure करता है कि classes globally available न हो, और हर component अपने unique styles के साथ आये।

File : src/components/Alert.module.css

Copy
.alert {
  background-color: #ffcc00;
  padding: 15px;
  color: #333;
  border-radius: 5px;
  text-align: center;
}

.alert-error {
  background-color: #ff4d4d;
}

File : src/components/Alert.js

Copy
import React from 'react';
import styles from './Alert.module.css';

function Alert({ message, isError }) {
  return (
    <div className={isError ? `${styles.alert} ${styles['alert-error']}` : styles.alert}>
      {message}
    </div>
  );
}

export default Alert;

Explanation -

• Alert.module.css file में .alert और .alert-error classes define कि गयी हैं जो alert messages को style करती हैं।

• Alert.js में import styles from './Alert.module.css' का use करके CSS को component के अंदर import किया गया है।

• styles.alert और styles['alert-error'] syntax के साथ scoped CSS classes को apply किया गया है।

CSS Modules का use reusable और isolated styles बनाने में helpful है, जो complex applications के लिए ideal है।

●●●

ReactJs Styled Components

Styled Components एक CSS-in-JS library है जो CSS को JavaScript में लिखने और directly components के साथ style define करने कि सुविधा देती है।

Styled Components के साथ हम dynamic और component-specific styles बना सकते हैं जो JavaScript के variables और props को access कर सकते हैं।

पहले styled-components को install करें:

npm install styled-components

File : src/components/StyledButton.js

Copy
import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;

  &:hover {
    background-color: ${(props) => (props.primary ? 'darkblue' : 'darkgray')};
  }
`;

function StyledButton({ primary, children }) {
  return <Button primary={primary}>{children}</Button>;
}

export default StyledButton;

Explanation

• styled.button एक styled component बनाता है जो Button component को custom styles के साथ define करता है।

• CSS properties में props का use किया गया है ताकि dynamic styling हो सके (props.primary ? 'blue' : 'gray').

• &:hover selector का use hover effect देने के लिए किया गया है।

• StyledButton component में primary prop का use करके button कि style को toggle किया जाता है।

Styled Components complex styling needs और dynamic CSS के लिए ideal होते हैं, जो JavaScript के variables और states को access कर सकते हैं.

●●●

ReactJs Global Styles with Styled Components

Styled Components के साथ हम Global Styles भी define कर सकते हैं जो सारी application में apply होते हैं। ये utility specific CSS और global resets के लिए useful है।

File : src/components/GlobalStyles.js

Copy
import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
  }
`;

export default GlobalStyles;

File : src/App.js

Copy
import React from 'react';
import GlobalStyles from './components/GlobalStyles';
import StyledButton from './components/StyledButton';

function App() {
  return (
    <>
      <GlobalStyles />
      <h1>Styled Components with Global Styles</h1>
      <StyledButton primary>Primary Button</StyledButton>
      <StyledButton>Secondary Button</StyledButton>
    </>
  );
}

export default App;

Explanation

• GlobalStyles में createGlobalStyle का use करके global CSS define कि गयी है।

• App.js में <GlobalStyles /> को include किया गया है जो पूरी application में global styles apply करता है।

●●●

ReactJs Conditional Styling Based on Props

React में हम props के through conditional styling implement कर सकते हैं जो component के look और feel को dynamic और user-driven बनाता है।

File : src/components/Badge.js

Copy
import React from 'react';
import styled from 'styled-components';

const Badge = styled.span`
  background-color: ${(props) => (props.type === 'success' ? 'green' : 'red')};
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 12px;
`;

function StatusBadge({ type, children }) {
  return <Badge type={type}>{children}</Badge>;
}

export default StatusBadge;

Explanation

• type prop का use करके conditionally background-color set किया गया है (green for success और red for error).

• StatusBadge component में type prop का use करके status के according से style को toggle किया जाता है।

●●●

I Hope , ये topic आपके लिए helpful रहा होगा , मिलते हैं next topic पर।

Happy coding! 🎉