CSS is one of the most common tools developers use to style web applications and make them look nice. However, using plain CSS in a web app with a large codebase can be time-consuming and exhausting.
One helpful solution to this challenge is a CSS-in-JS library called styled-components. This tool allows us to construct and manage our styles in a component-specific manner using JavaScript instead of an external CSS file.
Let’s take a look at an example of how to use styled-components. In this example, we will use styled-components along with TypeScript to style React Router links in an application’s navbar.
Here’s what we’ll cover:
- What is styled-components?
- Benefits of using styled-components
- Why use TypeScript in React?
- Using styled-components to style React Router links
What is styled-components?
styled-components is a React and React Native development library. With styled-components, you can use component-level styles in applications that are written using CSS-in-JS.
CSS-in-JS libraries like styled-components allow us to write CSS in JavaScript in a very elegant and reusable way by changing the way CSS styles are applied to React components.
Traditionally, you would manually assign CSS classes to elements within a component. CSS-in-JS libraries instead provide fundamental structures for scoping a CSS style locally to a component. This is done using distinct, auto-generated CSS classes.
styled-components is based on tagged template literals; when styling your components, actual CSS code is written between backticks. This allows developers to reuse their CSS code from one project to the next.
Benefits of using styled-components
Using styled-components in your React app comes with a lot of benefits. Read through a few examples below.
Elimination of className errors
It can be difficult to tell if a className is used elsewhere in your codebase. This is because every bit of styling is tied to a specific component.
Using styled-components provides a unique className for your styles and eliminates the problems associated with className duplications, misspellings, and overlaps.
Automatic critical CSS
Using styled-components helps you keep track of which components are rendered on a page and injects only those components’ styles. When combined with code splitting, your users will load the least amount of code possible.
Simple dynamic styling
Without having to manually manage dozens of classes, adapting the styling of a component based on its props or a global theme is simple and intuitive.
Easier styling maintenance
Typically, you would have to hunt through multiple files to find the styling that affects your component. With styled-components, you can just call out the particular styling you want through props instead of trying to manage tons of classNames.
Unlike traditional CSS, styled-components also allows you to make changes to your style without affecting an unrelated element or the behavior of the DOM. No matter how large your codebase is, styled-components will maintain your styling.
Importing styles into multiple project areas
When using styled-components, you can import your styles into other project areas regardless of how large or small your codebase is.
While this is also possible with traditional CSS, it would result in a large, bulky CSS codebase, which can become quite confusing and difficult to navigate.
Why use TypeScript in React?
TypeScript is a free, open source programming language created and maintained by Microsoft. It’s a strict superset of JavaScript with the addition of optional static typing and class-based, object-oriented programming.
Although you can usually use JavaScript to write code for similar tasks, React developers can benefit from TypeScript in several ways.
One such benefit is that our React applications will be more predictable if we use TypeScript to build them. TypeScript can print errors to the terminal at compile time and does not allow for code compilation, which enables us to catch these errors before runtime.
Using styled-components to style React Router links
Now that we have an understanding of what we are going to be working with, let’s go ahead and build our project.
Prerequisites for our project
To follow along with this project, we should have an understanding of React. We should also know how React Router works. Understanding TypeScript is a plus.
I also recommend using a styled-components extension such as vscode-styled-components, but this is optional. A styled-components extension will enable our editor to recognize our styled-components CSS and not see it as jargon.
Creating our React application
To create our React application, we’ll open up our terminal and navigate to the folder where we want to install our project. Run the following code:
npx create-react-app my-app --template typescript
You may see the following error message:
You are running create-react-app 4.0.3, which is behind the latest release (5.0.0). We no longer support global installation of Create React App
If you see this error message, it is because you installed it globally. To solve this problem, simply run the following commands one after the other:
npm uninstall -g create-react-app npx clear-npx-cache
Now you can now rerun the create-react-app code. If you have successfully installed your React with TypeScript app, you should see a structure like this:
Are you with me so far? Let’s keep going.
Deleting unwanted files in our src folder
The next thing we want to do is delete the unwanted files in our src folder. These files include App.test.tsx, index.css, logo.svg.
We also want to make edits to some of our files. First, delete the contents of the app.css file and write the following instead to get rid of any default margins and padding in our application:
.App {
text-align: center;
}
body {
margin: 0;
padding: 0;
}
Next, delete all the contents of App.tsx except where we import React and export the app. Then, add the following to create a functional component:
export interface AppProps {}
const App: React.FC<AppProps> = (props) => {
return (
<div></div>
)
}
export default App;
Finally, in our index.js, remove import './index.css.
Installing packages needed for this project
Let’s go ahead and install the packages we’ll be using for this project: react-router-dom and styled-components. First, change the directory to our app:
cd my-app
Next, let’s install the react-router-dom package and the styled components package:
npm install react-router-dom npm install styled-components
You will then need to run the following to allow styled-components to work with TypeScript:
npm install -D @types/styled-components
Finally, let’s start up our app:
npm start
We’ve got everything set for us to build, so let’s proceed.
Creating pages for our React application
Inside our src folder, create a folder called pages. We’ll be creating four pages for our links to navigate to: Home.tsx, About.tsx, Contact.tsx, and Navbar.tsx.
Let’s start with our Home, About, and Contact pages. We will also create a functional component and add some dummy text on each of these pages. The dummy texts will be used for navigation purposes with react-router.
The code for your Home.tsx file should look something like this:
export interface HomePageProps {}
const HomePage: React.FC<HomePageProps> = props => {
return (
<div>
<h1 >Home page</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi, qui.
Hic animi distinctio et maiores, ab nostrum at neque. Iusto minus
perspiciatis vitae unde? In quibusdam nulla perspiciatis laboriosam ex.
</p>
</div>
)
}
export default HomePage
The code for your Contact.tsx file should look something like this:
export interface ContactPageProps {}
const ContactPage: React.FC<ContactPageProps> = props => {
return (
<div>
<h1 >Contact us</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi, qui.
Hic animi distinctio et maiores, ab nostrum at neque. Iusto minus
perspiciatis vitae unde? In quibusdam nulla perspiciatis laboriosam ex.
</p>
</div>
)
}
export default ContactPage
The code for your About.tsx file should look something like this:
export interface AboutPageProps {}
const AboutPage: React.FC<AboutPageProps> = props => {
return (
<div>
<h1>About Page</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quasi
debitis fuga deserunt, placeat qui optio totam perspiciatis error.
Repudiandae, enim veniam. Dolorum officiis recusandae consequuntur
veritatis magni aliquam itaque.
</p>
</div>
)
}
export default AboutPage;
We’ll be creating our React navbar shortly. But first, let’s create the styling page for our navbar using styled-components.
Adding and styling navbar links using styled-components
Inside our src folder, create a folder called styles and a file named NavStyle. This file will contain styles for our React Router links. In this file, copy and paste the following:
import {Link} from "react-router-dom";
import styled from "styled-components";
export const NavbarContainer= styled.nav
width: 100%;
height:50px;
background-color: purple;
display: flex;
flex-direction: column;
;
export const NavbarLinkContainer = styled.div
display: flex;
export const NavbarLink = styled(Link)
color:white;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
margin: 10px;
&:hover,
&:focus{
color: blue;
}
&:active{
color: red;
};
This code block accomplishes a few different things. First, we imported styled from styled-components. We also imported the link from react-router-dom to let us style the link with styled-components.
It also contains basic styling like setting the display to flex, the color to white, and text-decoration to none. We’ll export each of these styles to our navbar.
Going back to our pages folder, let’s create our navbar file called Navbar.tsx and paste this in:
import React from "react";
import { Link } from "react-router-dom";
import {NavbarContainer,NavbarLinkContainer,NavbarLink} from '../styles/NavStyle';
export interface NavbarProps {}
const Navbar: React.FC<NavbarProps> = (props) => {
return (
<NavbarContainer>
<NavbarLinkContainer>
<NavbarLink className="nav-link active" to="/home">
Home
</NavbarLink>
<NavbarLink className="nav-link" to="/about">
About Us
</NavbarLink>
<NavbarLink className="nav-link" to="/contact">
Contact Us
</NavbarLink>
</NavbarLinkContainer>
</NavbarContainer>
)
}
export default Navbar;
You may have noticed we used NavbarLink instead of the link component in react-router-dom. NavbarLink is the same link, but with styling already applied. This is because in the previous step, we imported the link to our NavStyle file and gave it some styling.
Importing to App.tsx and declaring our routes
Now that we have added and styled our links, the last thing we want to do is import them to our App.tsx and declare our routes.
First, let’s import all our pages and routing packages into our App.tsx file:
import { BrowserRouter, Routes,Route } from "react-router-dom"
import AboutPage from "./pages/About";
import HomePage from "./pages/Home";
import ContactPage from "./pages/Contact";
import Navbar from "./pages/Navbar"
Next, let’s declare our routes. Inside return() in our App.tsx file, delete the div we wrote earlier and paste the following instead:
<BrowserRouter>
<Navbar/>
<Routes>
<Route path='/' element={<HomePage/>}/>
<Route path='home' element={<HomePage/>}/>
<Route path='about' element={<AboutPage/>}/>
<Route path='contact' element={<ContactPage/>}/>
</Routes>
</BrowserRouter>
The finished product
We can now check out our results in the browser:
You can get the full code in my GitHub repository.
Conclusion
Let’s recap what we discussed.
We talked about styled-components and the benefits of using it. We also took a look at why using TypeScript with React gives us an edge. Lastly, we used our knowledge of both styled-components and TypeScript to style React Router links.
Not so hard, was it? Please share if you found this helpful!
The post How to style React Router links with styled-components appeared first on LogRocket Blog.
from LogRocket Blog https://ift.tt/EuF7csW
via Read more
