How to usestyled-components in ReactJS

Approach 1: Using CSS modules

To change the color of a link in React using styled-components and import the styled function from the styled-components library. Create a styled component using the styled function and define the desired styles,

Styled components in React let you write CSS-in-JS, where a single component can contain both the HTML markup and the corresponding CSS.

Step to Install Module:

npm i styled-components

The updated dependencies in package.json file will look like.

"dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "styled-components": "^6.1.0",
        "web-vitals": "^2.1.4"
}

Example: This example is the same as the previous but the difference is that in the previous example, we use CSS modules but in this example, we used styled components. If you got an error like Can’t resolve ‘styled-components’. Install the styled-components package by using the command:

Javascript

// Filename - App.js
 
import React from "react";
import styled from "styled-components";
 
const Navbar = styled.nav`
    background-color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-size:1.4rem;
`;
 
const NavbarLinks = styled.ul`
    list-style: none;
    display: flex;
`;
 
const NavbarLink = styled.a`
    color: #fff;
    text-decoration: none;
    padding: 10px;
    /* Changing the color */
    &:hover {
        color: red;
    }
`;
 
export default function App() {
    return (
        <div>
            <Navbar>
                <NavbarLinks>
                    <li>
                        <NavbarLink href="#">
                            Home
                        </NavbarLink>
                    </li>
                    <li>
                        <NavbarLink href="#">
                            About
                        </NavbarLink>
                    </li>
                    <li>
                        <NavbarLink href="#">
                            Contact
                        </NavbarLink>
                    </li>
                </NavbarLinks>
            </Navbar>
        </div>
    );
}

Step to Run the Application: To Run Application: Open the terminal and type the following command.

npm start

Output: This output will be visible on the http://localhost:3000/ on the browser window.

How to Change the Color of a Link in ReactJS ?

In this article, we’ll see how we can change the color of a link in ReactJS. To change a link’s color in React, add a CSS style to the link element using the style attribute in JSX code.

Default link styles in HTML and CSS often include blue color and underlining. However, they may not align with your React app’s design. You might need to change the link color to match your app’s theme, and branding, or differentiate link states.