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.
To change the color of a link in React using CSS modules, create a CSS file with a unique class name, define the desired color property for that class, and import it into your React component. and the other one is 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,
Syntax:
<a href="#"> Home </a>
Steps to Create React Application:
Step 1: Create a react application by using this command
npx create-react-app change-color-project
Step 2: After creating your project folder, i.e. change-color-project, use the following command to navigate to it:
cd change-color-project
Step 3: To Run Application: Open the terminal and type the following command.
npm start
Project Structure: It will look as follows:
Note: Open the App.js file. Simply paste the source code into the App.js file.
Approach: Using CSS modules: CSS modules modularize CSS in React by defining styles in a separate file and importing them into the component.
Example 1: In this example, This code creates a React component that displays a navbar with three links styled with CSS modules. The React library and CSS module are imported, and the links have “#” as their href attribute. The CSS code styles a navigation bar with links. It uses “.navbar” for the bar’s background color, layout, and padding; “.navMenu” for the list style and display of links; “.link” for font size, color, padding, and removing underlines. Hovering over links changes color to red using “:hover”. These styles can be reused with corresponding class names in multiple elements.
Javascript
import React from "react"; import "./style.css"; export default function App() { return ( <nav className="navbar"> <ul className="navMenu"> <li> <a href="#" className="link"> Home </a> </li> <li> <a href="#" className="link"> About </a> </li> <li> <a href="#" className="link"> Contact </a> </li> </ul> </nav> ); } |
Step 4: Second create the styles.css then Open the styles.css file. Simply paste the source code into the styles.css file.
CSS
.navbar { background-color: #333; display: flex; justify-content: space-between; align-items: center; padding: 10px; } .navMenu { list-style: none; display: flex; } .link { color: #fff; text-decoration: none; padding: 10px; font-size: 1.4rem; } /* Changing the color */.link:hover { color: red; } |
Output:
Approach: Using styled-components: Styled components in React let you write CSS-in-JS, where a single component can contain both the HTML markup and the corresponding CSS.
Example 2: 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:
npm install styled-components
Javascript
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> ); } |
Output:
