REACT CSS

React allows you to style components using standard CSS, CSS modules, inline styles, or third-party libraries. Styling in React is highly flexible, enabling you to create modern, responsive, and maintainable user interfaces.

1. Adding CSS to React

You can add CSS to your React application in the following ways:

a. External CSS File

  • Create a .css file.
  • Import the CSS file into your React component.

Example:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/* styles.css */
h1 {
color: blue;
}
/* styles.css */ h1 { color: blue; }
/* styles.css */
h1 {
    color: blue;
}
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import './styles.css';
function App() {
return <h1>Hello, React!</h1>;
}
export default App;
import './styles.css'; function App() { return <h1>Hello, React!</h1>; } export default App;
import './styles.css';

function App() {
    return <h1>Hello, React!</h1>;
}

export default App;

b. Inline CSS

  • Define styles as a JavaScript object and apply them using the style attribute.

Example:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function App() {
const headingStyle = {
color: 'blue',
fontSize: '24px',
textAlign: 'center',
};
return <h1 style={headingStyle}>Hello, React!</h1>;
}
export default App;
function App() { const headingStyle = { color: 'blue', fontSize: '24px', textAlign: 'center', }; return <h1 style={headingStyle}>Hello, React!</h1>; } export default App;
function App() {
    const headingStyle = {
        color: 'blue',
        fontSize: '24px',
        textAlign: 'center',
    };

    return <h1 style={headingStyle}>Hello, React!</h1>;
}

export default App;

c. CSS Modules

  • CSS Modules help scope styles to specific components, avoiding naming collisions.

Example:

  1. Create a CSS module file: styles.module.css.
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    /* styles.module.css */
    heading {
    color: green;
    }
    /* styles.module.css */ heading { color: green; }
    /* styles.module.css */
    heading {
        color: green;
    }
    
  2. Import and use it in your component:
    Plain text
    Copy to clipboard
    Open code in new window
    EnlighterJS 3 Syntax Highlighter
    import styles from './styles.module.css';
    function App() {
    return <h1 className={styles.heading}>Hello, React!</h1>;
    }
    export default App;
    import styles from './styles.module.css'; function App() { return <h1 className={styles.heading}>Hello, React!</h1>; } export default App;
    import styles from './styles.module.css';
    
    function App() {
        return <h1 className={styles.heading}>Hello, React!</h1>;
    }
    
    export default App;
    

d. Styled-Components (Third-Party Library)

  • Use libraries like styled-components for dynamic styling and theming.

Installation:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install styled-components
npm install styled-components
npm install styled-components

Example:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import styled from 'styled-components';
const Heading = styled.h1`
color: purple;
font-size: 24px;
text-align: center;
`;
function App() {
return <Heading>Hello, React!</Heading>;
}
export default App;
import styled from 'styled-components'; const Heading = styled.h1` color: purple; font-size: 24px; text-align: center; `; function App() { return <Heading>Hello, React!</Heading>; } export default App;
import styled from 'styled-components';

const Heading = styled.h1`
    color: purple;
    font-size: 24px;
    text-align: center;
`;

function App() {
    return <Heading>Hello, React!</Heading>;
}

export default App;

2. Adding Dynamic Classes

React allows you to dynamically assign CSS classes using conditional logic.

Example: Dynamic Classes

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function App() {
const isActive = true;
return (
<div>
<h1 className={isActive ? 'active' : 'inactive'}>Hello, React!</h1>
</div>
);
}
export default App;
function App() { const isActive = true; return ( <div> <h1 className={isActive ? 'active' : 'inactive'}>Hello, React!</h1> </div> ); } export default App;
function App() {
    const isActive = true;

    return (
        <div>
            <h1 className={isActive ? 'active' : 'inactive'}>Hello, React!</h1>
        </div>
    );
}

export default App;

CSS:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.active {
color: green;
}
.inactive {
color: red;
}
.active { color: green; } .inactive { color: red; }
.active {
    color: green;
}

.inactive {
    color: red;
}

3. Inline Styles with Dynamic Values

You can dynamically modify inline styles based on component state or props.

Example:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function App() {
const isHighlighted = true;
const style = {
color: isHighlighted ? 'blue' : 'gray',
fontWeight: isHighlighted ? 'bold' : 'normal',
};
return <h1 style={style}>Hello, React!</h1>;
}
export default App;
function App() { const isHighlighted = true; const style = { color: isHighlighted ? 'blue' : 'gray', fontWeight: isHighlighted ? 'bold' : 'normal', }; return <h1 style={style}>Hello, React!</h1>; } export default App;
function App() {
    const isHighlighted = true;

    const style = {
        color: isHighlighted ? 'blue' : 'gray',
        fontWeight: isHighlighted ? 'bold' : 'normal',
    };

    return <h1 style={style}>Hello, React!</h1>;
}

export default App;

4. Styling Multiple Classes

To combine multiple classes, use template literals or libraries like classnames.

Example: Combining Classes

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function App() {
const isActive = true;
const isHighlighted = false;
return (
<h1 className={`${isActive ? 'active' : ''} ${isHighlighted ? 'highlighted' : ''}`}>
Hello, React!
</h1>
);
}
export default App;
function App() { const isActive = true; const isHighlighted = false; return ( <h1 className={`${isActive ? 'active' : ''} ${isHighlighted ? 'highlighted' : ''}`}> Hello, React! </h1> ); } export default App;
function App() {
    const isActive = true;
    const isHighlighted = false;

    return (
        <h1 className={`${isActive ? 'active' : ''} ${isHighlighted ? 'highlighted' : ''}`}>
            Hello, React!
        </h1>
    );
}

export default App;

CSS:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.active {
color: green;
}
.highlighted {
font-weight: bold;
}
.active { color: green; } .highlighted { font-weight: bold; }
.active {
    color: green;
}

.highlighted {
    font-weight: bold;
}

5. CSS-in-JS

React allows CSS-in-JS approaches for writing styles directly within JavaScript files, as seen with libraries like emotion, styled-components, or JSS.

6. Animations with CSS

You can add animations in React using CSS animations or third-party libraries like framer-motion.

Example: CSS Animation

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/* styles.css */
.fade-in {
animation: fadeIn 2s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* styles.css */ .fade-in { animation: fadeIn 2s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* styles.css */
.fade-in {
    animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import './styles.css';
function App() {
return <h1 className="fade-in">Hello, React!</h1>;
}
export default App;
import './styles.css'; function App() { return <h1 className="fade-in">Hello, React!</h1>; } export default App;
import './styles.css';

function App() {
    return <h1 className="fade-in">Hello, React!</h1>;
}

export default App;

7. Best Practices for Styling in React

  1. Use BEM Naming Convention: If using global CSS, adopt a structured naming convention like BEM (Block Element Modifier).
  2. Leverage CSS Modules: For large projects, use CSS Modules to avoid class name conflicts.
  3. Keep Styles Scoped: Avoid global styles unless necessary to ensure maintainability.
  4. Dynamic Styling: Use inline styles or conditional classes for state-based styling.
  5. Use Variables: Use CSS variables or JavaScript variables for consistent theming.

8. Tools and Libraries for Styling

  • CSS Frameworks: Bootstrap, Tailwind CSS, Material-UI.
  • CSS-in-JS Libraries: Styled-components, Emotion, JSS.
  • Animations: Framer Motion, GSAP.

Conclusion

React offers a variety of styling approaches, each with its own advantages. By combining external CSS, CSS modules, inline styles, or CSS-in-JS, you can design responsive and visually appealing components tailored to your project’s needs.