Enhancing Your React Login Component with External Stylesheets

Published by : Code Crafts Campus
April 15, 2024

Enhancing Your React Login Component with External Stylesheets

While inline CSS is great for quick tweaks and small projects, using external stylesheets in React applications allows for more scalable and maintainable code. In this tutorial, we will refactor our simple login component to use an external CSS file for styling. This method helps keep your JavaScript and styling separate, making the codebase easier to manage and navigate.

Benefits of External Stylesheets

Separation of Concerns: Keeping your styles in separate CSS files helps maintain a clear separation between presentation and logic.
Reusability: CSS classes can be reused across different components, reducing code duplication and maintaining consistency.
Maintainability: External stylesheets are easier to maintain, especially for larger projects with multiple developers.

Step 1: Creating the External Stylesheet

Before we adjust our React component, let’s start by creating a new CSS file for our styles.

Create a CSS File

In your project’s `src` folder, create a new file named `Login.css`. This file will contain all the styles for your Login component.

Add Styles to the CSS File

Open `Login.css`and add the following CSS rules:

				
					.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.login-input {
    margin: 10px 0;
    padding: 10px;
    font-size: 16px;
    width: 300px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.login-button {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: blue;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

Step 2: Updating the Login Component

Now that we have our CSS ready, let’s refactor our `Login` component to use these styles.

Update the `Login.js` File

Remove Inline Styles: Open your `Login.js` and remove the inline styles.
Import the CSS File: At the top of the `Login.js`, add an import statement to include the `Login.css` file.

Here’s how your updated `Login.js` should look:

				
					import React, { useState } from 'react';
import './Login.css';

function Login() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    return (
        <div className="login-container">
            <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="Enter email"
                className="login-input"
            />
            <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="Enter password"
                className="login-input"
            />
            <button className="login-button" onClick={() => console.log('Login Attempt')}>
                Log In
            </button>
        </div>
    );
}

export default Login;

Step 3: Include the Component in Your Application

If not already included, ensure your `Login` component is imported and used in `App.js`:

				
					import React from 'react';
import Login from './Login';

function App() {
    return (
        <div className="App">
            <Login />
        </div>
    );
}

export default App;

With this we have successfully refactored login component to use an external stylesheet for styling, making your code cleaner and more maintainable. This approach not only enhances the scalability of our application but also simplifies style management, especially as project grows.

Enhancing Your React Login Component with External Stylesheets