MUI Typography - Text turns white when hovered over

I've created a customized component that turns green on hover. Here's the code for it:

const ProjectAdd= styled.div`
  background-color: white;
  list-style-type: none;
  list-style: none;
  height: 100%;
  width: 10%;
  height: 100%;
  border-radius: .4em;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 10px #7d7d7d99;
  box-shadow: 3px 5px 15px -4px #999999;
  

  transition: .5s all;

  &:hover{
    background-color: #00935f61;
    color: "white";
  }

`

In my component, this shows up like this:

                <ProjectAdd>
                    <Typography fontSize=".85em" color="#009360">
                        + Add
                    </Typography>
                </ProjectAdd>

If I want the typography to turn white on hover too, how can I achieve that without additional styles?

cssreactjsmaterial-ui

Answer №1

There are a couple of choices to consider.

Choice 1: Implement the sx prop

    <ProjectAdd>
      <Typography
        fontSize=".85em"
        color="#009360"
        sx={{ "&:hover": { color: "white" } }}
      >
        + Add
      </Typography>
    </ProjectAdd>

https://codesandbox.io/s/typography-hover-color-889nvy?fontsize=14&hidenavigation=1&theme=dark

This might be exactly what you're looking to avoid when you mention "without a style{{}}", so another option is ...

Choice 2: Focus on &:hover .MuiTypography-root within the ProjectAdd styles

import styled from "@emotion/styled";
import Typography from "@mui/material/Typography";

const ProjectAdd = styled.div`
  background-color: white;
  list-style-type: none;
  list-style: none;
  height: 100%;
  width: 10%;
  height: 100%;
  border-radius: 0.4em;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 10px #7d7d7d99;
  box-shadow: 3px 5px 15px -4px #999999;

  transition: 0.5s all;

  &:hover {
    background-color: #00935f61;
    color: white;
  }
  &:hover .MuiTypography-root {
    color: white;
  }
`;
export default function App() {
  return (
    <ProjectAdd>
      <Typography fontSize=".85em" color="#009360">
        + Add
      </Typography>
    </ProjectAdd>
  );
}

https://codesandbox.io/s/typography-hover-color-ve7ppx?fontsize=14&hidenavigation=1&theme=dark

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

What advantages can I gain from serving my React application through my Express server?

After researching how to render a React app from an express server, I'm wondering what the advantages are of doing so? I've already created a React app and used an express server to communicate with my database. I would run my express server and ...

node.jsreactjsexpress

Tips for styling the four DIV elements on a website's homepage with CSS

In my current project, I am working on a webpage that requires specific layout elements. On the web homepage, I need to split it into four sections positioned between the header and footer. The main code snippet for the homepage structure is as follows: ...

htmlcss

Issue with HTML and CSS Grid alignment coupled with CSS syntax error on RBRACE

I'm in the process of updating my website indexes and decided to incorporate grids. However, when attempting to implement grids using Dreamweaver, I encountered several issues. Firstly, an error message appeared stating "Expected RBRACE at line 72, co ...

htmlcss

Issues with the animation of the navbar menu button are preventing it from functioning

I have been attempting to incorporate animation when the navbar-button is toggled on smaller screen sizes. Inspired by the design of .navbar-toggle.larr in this particular template, I tried to implement a similar effect. /* ANIMATED LEFT ARROW */ .navbar- ...

jqueryhtmlcsstwitter-bootstrapanimation

The jQuery DataTable with footer is lacking responsiveness

Why is my table not responsive when I add a tfoot? I tried using the example found at https://datatables.net/examples/api/multi_filter.html Interestingly, when the footer contains only text, the table is responsive. However, if there's an input fie ...

jqueryhtmltwitter-bootstrapcssdatatables

What is the best way to conceal the bottom portion of an image?

My image in the header overlaps with the next section's features (image-phone). I've tried changing the position and z-index types. If I crop the image, it's not ideal and difficult to fix ;) How can I structure my image: using a div-class ...

htmlcss

List organized in two columns utilizing the data-* attribute

Is it possible to display a list in a two-column format based on a data attribute of each item? <ul> <li data-list="general_results">general text1</li> <li data-list="general_results">general text2</li> <li dat ...

htmlcss

What is the formula to determine the sizes of grandchildren div containers?

Hey everyone, I'm having some trouble with my jQuery code and I can't seem to figure out what's going on. Here's the scenario: I'm creating a few divs (based on entries from MySQL) and I'd like to show you the end result: ...

javascriptjquerycsshtml

Show the saved email message text on an HTML webpage

Is there a way to show the email content stored in a HTML page? $.ajax({ type: "POST", url: "./mailBody.php", dataType: 'json', success: function (data) { $.each(data, function(index, element) { $('.mail ...

phpjqueryhtmlcss

A guide on layering .ogg video with .png image using HTML5 and CSS3

I am having difficulty achieving the desired effect, even when using z-index and position:absolute. My goal is to overlay a .png image on top of a video, while still allowing the transparent parts of the .png file to reveal the video playing in the backg ...

htmlcssogg

Fetching data from the local server URL using Axios in a React application

My setup involves a Typescript Express server with an API route that also serves a Typescript React app on the domain root. For instance: https://myapp.test displays the React Web App https://myapp.test/api/message returns a specific message string Withi ...

reactjsexpressurlgetaxios

The button can only be edited using Internet Explorer

My webpage features a button that displays correctly in Chrome, but the text inside the button gets cut off when viewed in IE (see image). Can you provide guidance on what might be causing this issue and how to resolve it? Bootstrap version 4.0.0 is also b ...

cssinternet-explorercross-browserbootstrap-4

Create a custom CSS style to replace the default jQuery hide() function

HTML <div class="adm-input" <?php if(!empty($admin_fee) || $admin_fee != "") echo "style='display:block'"; ?> id="fees-input"> <label>Admission Fees(<i class="fa fa-inr"></i>)</label> <div class="in ...

javascriptjqueryhtmlcss

What is the process for sending a POST request from a React app to a Node.js Express server?

I watched a tutorial video on resolving the CORS issue, which worked well for GET requests. However, I encountered an issue when attempting to send a POST request. Unfortunately, I do not have control over the third-party API and cannot make any changes to ...

javascriptreactjsapiexpresscors

Dealing with the "TypeError: Cannot read property 'style' of undefined" error in material-ui Transitions: A troubleshooting guide

While attempting to incorporate transitions within my react app, I encountered a recurring error whenever I tried to implement any transition module: "TypeError: Cannot read property 'style' of undefined". (anonymous function) node_modules/ ...

javascriptreactjsmaterial-ui

Creating a sleek horizontal scrolling list with the least amount of rows using tailwindcss

Is there a way to create a 3-row list with horizontal scroll without the unwanted space between items? I've been using tailwindcss and grid to achieve this layout, but I'm encountering issues with spacing: https://i.stack.imgur.com/WeRyQ.png Cu ...

htmlcsstailwind-css

I'm having trouble jotting down notes in the TextFields

I'm currently facing an issue when trying to add a new user to my database using the axios post method. I have created a form with Material UI, and although there are no console errors or browser issues, I am unable to input text into the TextFields. ...

reactjsaxiosmaterial-uireact-hooks

What methods can be used to incorporate animation when the display attribute transitions to none?

Is there a way to add animation in a Vue app when replacing elements? I would like the transition from, for example, clicking on a div with 'Num 1' to the divs with class 'showing' not disappear abruptly but smoothly, such as moving to ...

javascriptcssvue.js

Why won't hover over function properly in separate divs for two items?

My goal is to show text when hovering over a logo, but the text and logo are in different divs. Despite trying various solutions like using display: none and display: block, I still can't get it to work. import styles from '../styles/Float.module ...

javascriptcssnext.jshoverjsx

Tips for transferring a value from a Next.js route to a physical component

So, I encountered some issues while creating a Next.js project related to the database. To solve this problem, I connected to Vercel's hosted database. After successfully inserting and selecting data into the database using routes, I wanted to enhance ...

javascriptreactjsnext.jslocal-storage