Customize Material-UI Icons styles in React app

I'm working on a React.js app with Typescript and I need to remove the default visited Material Icons coloring from an anchor tag. Here's the stylesheet I tried:

  const useStyles = makeStyles((theme: Theme) =>
    createStyles(
    myAnchor: {
      "&:visited": {color: "inherit"},
      "&:hover": {color: "inherit"},
      "&:active": {color: "inherit"}
    }
    ...
  )
  const classes = useStyles();

However, when I applied it using 

<a className={classes.myAnchor}><FacebookIcon /></a>
, it didn't work as expected. Am I doing something wrong with "&:visited"?

htmlcssreactjstypescriptmaterial-ui

Answer №1

You have the option to utilize Material-UI IconButton

import React from "react";
import "./styles.css";
import { makeStyles, IconButton } from "@material-ui/core";
import FacebookIcon from "@material-ui/icons/Facebook";

const useStyles = makeStyles(theme => ({
  icon: {
    "& :visited": { color: "red" },
    "& :hover": { color: "red" },
    "& :active": { color: "red" }
  }
}));

export default function App() {
  const classes = useStyles();
  return (
    <div className="App">
      <IconButton
        className={classes.icon}
        // component={Link}
        // to={`/url`}
      >
        <FacebookIcon />
      </IconButton>
    </div>
  );
}

https://i.sstatic.net/FZqaq.gif

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The app router in Next.js version 13.5+ has a server component that effectively disables caching

I am facing an issue with my profile screen rendering based on cookies. The problem occurs when the cookie is not present or invalid, as it renders a login link. Even after the user logs in and returns to the profile page, the login link continues to appea ...

reactjscachingnext.jsnext.js13app-router

What causes the variation in default margin between React and traditional HTML?

There seems to be a difference in margin between <button> elements when rendered by React compared to plain HTML. Plain HTML adds a small margin between the buttons, while React removes it completely. Does anyone have an explanation for this discrep ...

htmlcssreactjs

What is the best way to combine height and min-height in order to ensure that a div always extends to the bottom and keeps

I've tried multiple suggestions without success so far. In my website, I have a main section with white background centered on the page. It stretches nicely to the bottom using flex. See image: However, there's a specific section with lots of co ...

htmlcssheight

The dropdown feature stores and displays only the initial value

After resolving my previous question (link), I am now facing a new issue where the value of the name field is only reflecting the first item in the dropdown list. Let me explain further. I have two dropdown menus, where selecting an option in one (A) dyna ...

javascriptphpjqueryhtml

Retrieve the information from a website and display it on the current webpage using an ajax request

Is there a way to insert parsed HTML content into my webpage using just a link from another page? I'm attempting to use an AJAX call, but I keep receiving an error. Below is the code I've written, and the browser doesn't seem to be the issue ...

javascriptjqueryhtmlajax

Using jQuery and JSON data to dynamically populate a second dropdown menu with filtered options

I am working on a form with two drop-down menus and a text box. The first drop-down contains static values, while the second drop-down is populated dynamically from a JSON array. My goal is to filter the options in the second drop-down based on the selecti ...

javascriptjqueryhtmljson

What is the best way to maintain a Photo's Aspect Ratio using just HTML and CSS?

Although I've been a bit slow to get on board with Responsive Design, I finally understand how it works. However, there's one specific issue that has stumped me - something I don't recall ever encountering in my 10 years of website developme ...

htmlimagecss

Encountering the error message "PreviewBuilder.corePresets is not iterable" while integrating Storybook into a fresh Next.js project

After some searching, I couldn't find a solution to my Storybook issue as a newbie. Starting with a new NextJS project and adding ESLint, Jest, and Tailwind went smoothly. Trying to integrate Storybook following the instructions at this link: Upon ...

reactjsnext.jsstorybook

Tips for preserving changes made to a jQuery script when the page is reloaded

Is there a way to retain jQuery script changes when the page is reloaded? I have a page where clicking on certain elements triggers events, and I want these changes to persist even after reloading the page, resetting only when the cache is cleared. I appre ...

javascriptjqueryhtml

Passing a variable using a button's value attribute in jQuery

My goal is to develop a form in my application where users can input their name and address. Once the user enters the information, I need to validate it and add it to an array before submitting it to the PHP function. Additionally, I want to provide users ...

jqueryhtmlbutton

Removing the Create React App sample in a production environment can be achieved by following these

I recently deployed a domain on a production server and noticed that every time I open it, the address bar shows "Install app: Create React app sample." Is there a way to remove this message? What changes should I make in my code? Any suggestions? //Clie ...

reactjscreate-react-appproduction-environment

Converting language into class components using ngx-translate in Angular

Seeking to convert the information from a table into my typescript class. The data in the table is sourced from a JSON file within the /assets directory. Is there a method to accomplish this task? How can I categorize translation within a typescript class ...

angulartypescriptngx-translate

What steps can I take to center the content of my webpage using react bootstrap?

Currently, I am working on creating a desktop webpage with react-bootstrap. This webpage consists of a logo, main heading, form, and some links that appear after the form. To ensure that all of this content is displayed in the center of the webpage, I am ...

javascriptreactjsreact-bootstrapbootstrap-5

The HTML table inexplicably displays a random comma out of nowhere

When working on my HTML table, I noticed that it was rendering a comma unexpectedly. I am using Nodemailer and SMTP Google server, and I suspect the issue lies within the HTML code. However, I am struggling to identify the exact problem. https://i.stack.i ...

javascripthtmlnode.jsmongodbnodemailer

What is the best way to add character limits to an HTML form?

Hello there, I am currently working on creating an HTML form to generate a PDF file. However, I am facing difficulties in figuring out how to create the character placeholders for text input fields (as shown in the screenshot of a sample PDF file below). ...

htmlforms

When HTML is outside of the root web directory, it is unable to access any files

My files for html, css, and javascript are structured within the /www/ directory in their own respective folders (/www/html, /www/css, /www/js). The web root is located at /www/www/ When using the readfile function in my PHP code like this: readfile(" ...

phphtmlcssweb

Guide on how to forward the response obtained from an Ajax call to a different HTML page

I am working with a mongoose database that stores data containing an individual's first and last name. The user inputs their first name into a field, triggering an ajax request sent to the file named controller.js. This file generates a JSON response ...

javascripthtmljsonnode.jsmongoose

Utilizing Asynchronous Functions within a Loop

I have a situation where I am working with an array and need to make API calls for each index of the array. Once the API call is resolved, I need to append the result in that specific element. My goal is to ultimately return the updated array once this pro ...

javascriptreactjsasync-await

The span is unresponsive

When focusing on an input or checking its validity, the span should move up but it's not responding to any styles. <div class="login"> <span class="logtxt">Username or email</span> <input type=& ...

htmlcss

Support for nesting span elements in HTMLDocument

Struggling to incorporate this specific text into my HTMLDocument: <html><span class='stuff' id='X'><span id='Y'>content</span></span></html> Utilizing the following code for insertion: S ...

javahtmldom