Enhancing a Login/Register Application: Introducing Styled Components with React, Node.js, and Postgres | From Beginner to Advanced

CodeGenitor
4 min readMay 5, 2024

--

styled-component

Introduction:

Discover the power of Styled Components in our Login/Register app! From beginners to advanced users, learn to integrate Styled Components with React, Node.js, and Postgres for dynamic, encapsulated styles. Elevate your projects with this tutorial!

Note:
This tutorial continues our project on the Login application with React, Node.js, and Postgres. Feel free to integrate it into your existing project or fork the repository provided here.

Overview:

In this tutorial, we’ll integrate Styled Components into our existing React, Node.js, and Postgres login application. Styled Components offer a powerful solution for styling React components, providing encapsulated, dynamic styles within a component-based architecture. We’ll cover setup, converting existing styles, dynamic styling, theming, optimization, and more. Get ready to elevate your project with Styled Components!

Step 1: Project Setup and Dependencies

Install Styled Components:

· navigate to the frontend project and run the following command:

npm install styled-components

Note:
Ensure that you have a react project setup already or that you have already forked the project from gihub.

Step 2: Styling Components with Styled Components

· Navigate to the “login” folder and create a new folder named “loginStyles” to manage the styles for the login component.

cd src; cd pages; cd login && touch loginStyles.ts

Note:
The command in the frontend folder terminal above will generate the file loginStyles.ts. Alternatively, you can manually create the file by navigating to the login folder and adding a new file.

· Add the following styles to the loginStyles file.

import styled from "styled-components";

// Define the interface for the Button component props
interface IButton {
primary?: string; // Optional primary prop of type string
}

// Define a styled button component with styled-components
export const Button = styled.button<IButton>`
background-color: ${(props) => (props.primary ? "#007bff" : "white")}; // Set background color based on primary prop
color: ${(props) => (props.primary ? "white" : "#007bff")}; // Set text color based on primary prop
border: 2px solid #007bff; // Set border style
padding: 10px 20px; // Set padding
border-radius: 5px; // Set border radius
cursor: pointer; // Set cursor style to pointer

&:hover {
background-color: ${(props) => (props.primary ? "#0056b3" : "#e9ecef")}; // Change background color on hover
}
`;

// Define a styled container component with styled-components
export const Container = styled.div`
background-color: #f8f9fa; // Set background color
width: 100%; // Set width to 100%
padding: 20px; // Set padding
border-radius: 5px; // Set border radius
`;

· Import the styled component into the Login.tsx file. Open the Login.tsx file and update with the following code.

import React, { FC } from "react";
import { Form } from "react-bootstrap";
import { Formik, Field, FormikProps, FormikHelpers } from "formik";
import * as Yup from "yup";
import { Button, Container } from "./loginStyles";

// Define the interface for form values
interface FormValues {
email: string;
password: string;
}

const Login: FC = () => {
// Define validation schema using Yup
const validationSchema = Yup.object().shape({
email: Yup.string().required("Email is required"),
password: Yup.string().required("Password is required"),
});

// Define form submit handler
const handleSubmit = (
values: FormValues,
{ setSubmitting }: FormikHelpers<FormValues>
) => {
// Handle form submission
//console.log(values);
setSubmitting(false);
};

return (
<Container className="mx-auto max-w-md space-y-6">
<div className="space-y-2 text-center">
<h1 className="text-3xl font-bold">Login in</h1>
<p className="text-gray-500 dark:text-gray-400">
Enter your details to get started.
</p>
</div>
{/* Formik form wrapper */}
<Formik
initialValues={{ email: "", password: "" }}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
{/* Render form inside Formik */}
{({ handleSubmit }: FormikProps<FormValues>) => (
<Form className="space-y-4" onSubmit={handleSubmit}>
{/* Email input field */}
<Form.Group className="mb-3" controlId="email">
<Form.Label>Email</Form.Label>
<Field type="email" name="email" as={Form.Control} />
</Form.Group>
{/* Password input field */}
<Form.Group className="mb-3" controlId="password">
<Form.Label>Password</Form.Label>
<Field type="password" name="password" as={Form.Control} />
</Form.Group>
{/* Submit button */}
<Button primary="true" type="submit" className="w-full">
Sign In
</Button>
</Form>
)}
</Formik>
</Container>
);
};

export default Login;

· Create a global styles file named `globalStyles.ts` within the `src` directory. Insert the following code:

import styled from "styled-components";

export const GlobalStyle = styled.div`
font-family: 'Roboto', sans-serif;
font-size: 16px;
background-color: #A87676;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;

`;

· Update the `App.tsx` file with the following code:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import AppRoutes from "./routes/index.route";
import { GlobalStyle } from "./globalStyles";

const App = () => {
return (
<GlobalStyle>
<AppRoutes />
</GlobalStyle>
);
};

export default App;

Conclusion:

In conclusion, styled-components offer a powerful way to style React components with the flexibility of CSS-in-JS. They allow for the creation of reusable and encapsulated styling, making it easier to maintain and manage styles within your application. With styled-components, you can write CSS directly within your JavaScript code, which enhances component portability and reduces the need for separate CSS files. Additionally, styled-components support dynamic styling based on props and theme context, enabling responsive and theme-aware designs. Overall, styled-components are a valuable tool for building modern and stylish user interfaces in React applications.

Hopefully, I have been able to help you achieve your aim, share with a friend who could benefit and give me a like and subscribe to help me help more.

--

--

CodeGenitor

Software developer passionate about coding, innovation, and tech trends. Turning ideas into reality, one line of code at a time.