Using CSS in React

1. Importing CSS in Components

To include CSS in React components, you can import the CSS file at the top of your component file. This method ensures that the styles are applied to the component and its children. Here is an example:

    
    // App.js
    import React from 'react';
    import './App.css'; // Importing the CSS file

    function App() {
        return (
            <div className="App">
                <header className="App-header">
                    <h1>Welcome to React</h1>
                </header>
            </div>
        );
    }

    export default App;
    
    

2. Scoped CSS for Local Component Styling

In React, to ensure that styles are scoped locally to a specific component, you can use CSS Modules. CSS Modules allow you to write CSS that is scoped to a single component and does not leak to other components.

Example of Using CSS Modules:

    
    // App.module.css
    .App {
        text-align: center;
    }

    .App-header {
        background-color: #282c34;
        padding: 20px;
        color: white;
    }

    // App.js
    import React from 'react';
    import styles from './App.module.css'; // Importing CSS module

    function App() {
        return (
            <div className={styles.App}>
                <header className={styles['App-header']}>
                    <h1>Welcome to React</h1>
                </header>
            </div>
        );
    }

    export default App;
    
    

3. Inline Styling

Inline styling is another way to style React components. You can use the style attribute to add styles directly to elements. The styles should be written as a JavaScript object with camelCase property names.

Example of Inline Styling:

    
    // App.js
    import React from 'react';

    function App() {
        const headerStyle = {
            backgroundColor: '#282c34',
            padding: '20px',
            color: 'white',
        };

        return (
            <div style={{ textAlign: 'center' }}>
                <header style={headerStyle}>
                    <h1>Welcome to React</h1>
                </header>
            </div>
        );
    }

    export default App;
    
    

4. Styled Components

Styled Components is a library for React that allows you to use component-level styles in your application. It uses tagged template literals to style components and provides a way to keep the concerns of styling and element architecture separated.

Example of Styled Components:

    
    // Install styled-components using npm or yarn
    // npm install styled-components
    // yarn add styled-components

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

    const AppWrapper = styled.div`
        text-align: center;
    `;

    const Header = styled.header`
        background-color: #282c34;
        padding: 20px;
        color: white;
    `;

    function App() {
        return (
            <AppWrapper>
                <Header>
                    <h1>Welcome to React</h1>
                </Header>
            </AppWrapper>
        );
    }

    export default App;
    
    

5. CSS-in-JS Libraries

There are several CSS-in-JS libraries available for React that allow you to write CSS directly in your JavaScript code. Some popular libraries include Emotion and JSS.

Example of Using Emotion:

    
    // Install Emotion using npm or yarn
    // npm install @emotion/react @emotion/styled
    // yarn add @emotion/react @emotion/styled

    import React from 'react';
    /** @jsxImportSource @emotion/react */
    import { css } from '@emotion/react';
    import styled from '@emotion/styled';

    const appStyle = css`
        text-align: center;
    `;

    const Header = styled.header`
        background-color: #282c34;
        padding: 20px;
        color: white;
    `;

    function App() {
        return (
            <div css={appStyle}>
                <Header>
                    <h1>Welcome to React</h1>
                </Header>
            </div>
        );
    }

    export default App;
    
    

6. Using External CSS Frameworks

You can also use external CSS frameworks like Bootstrap or Tailwind CSS in your React projects. To use these frameworks, you can include their CSS files in your project and apply the classes to your components.

Example of Using Bootstrap:

    
    // Install Bootstrap using npm or yarn
    // npm install bootstrap
    // yarn add bootstrap

    // Import Bootstrap CSS in your index.js or App.js
    import 'bootstrap/dist/css/bootstrap.min.css';

    // App.js
    import React from 'react';
    import 'bootstrap/dist/css/bootstrap.min.css';

    function App() {
        return (
            <div className="container text-center">
                <div className="row">
                    <div className="col">
                        <h1>Welcome to React</h1>
                    </div>
                </div>
            </div>
        );
    }

    export default App;
    
    

Conclusion

React provides several ways to style your components, from traditional CSS files and CSS Modules to inline styles and CSS-in-JS solutions like Styled Components and Emotion. Each method has its own advantages and can be used based on the specific requirements of your project. By leveraging these styling techniques, developers can create visually appealing and maintainable React applications.