Add hover effects to components inside MuiButton

Question

Add hover effects to components inside MuiButton

I'm currently working with styled components and Material UI, but I'm struggling to add hover styles to the children of MuiButton. Despite following online resources and documentation, I can't seem to make it work. Here's how my jsx is set up:

<StyledMuiButton onClick={() => ()}>
  <Svg />
  <MuiTypography color={Color.gray} variant="caption">
    Text
   </MuiTypography>
</StyledMuiButton>

and here's the styled component implementation:

const StyledMuiButton = styled(MuiButton)`
  && {
    .MuiButton-label {
      flex-direction: column;
    }

   &:hover ${MuiTypography} {
      color: ${Color.primary};
    }
  }
`;

If anyone could provide some guidance in solving this issue, it would be greatly appreciated.

css reactjs typescript material-ui styled-components

Answer 1

Answer №1

Below is a demonstration showcasing various methods for targeting elements within a button:

import React from "react";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import DoneIcon from "@material-ui/icons/Done";
import styled from "styled-components";

const StyledButton = styled(Button)`
  & .MuiButton-label {
    display: flex;
    flex-direction: column;
  }
  &:hover {
    color: red;
    .MuiSvgIcon-root {
      background-color: blue;
    }
    .MuiTypography-root {
      color: green;
      &:nth-of-type(2) {
        color: purple;
      }
    }
  }
`;

export default function App() {
  return (
    <div className="App">
      <Button>Default Button</Button>
      <StyledButton>Styled Button</StyledButton>
      <StyledButton>
        <DoneIcon />
        <span>Styled Button</span>
        <Typography>Typography 1</Typography>
        <Typography>Typography 2</Typography>
      </StyledButton>
    </div>
  );
}

https://codesandbox.io/s/zen-germain-2gv22?fontsize=14&hidenavigation=1&theme=dark

This approach makes use of the predefined global class names assigned to the elements, as detailed in the CSS section of the API page for each component (e.g., the Typography documentation can be found here: https://material-ui.com/api/typography/#css). In general, the primary element within a Material-UI component can be selected using MuiComponentName-root (such as MuiTypography-root for Typography).

Answer 2

Below is a demonstration showcasing various methods for targeting elements within a button:

import React from "react";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import DoneIcon from "@material-ui/icons/Done";
import styled from "styled-components";

const StyledButton = styled(Button)`
  & .MuiButton-label {
    display: flex;
    flex-direction: column;
  }
  &:hover {
    color: red;
    .MuiSvgIcon-root {
      background-color: blue;
    }
    .MuiTypography-root {
      color: green;
      &:nth-of-type(2) {
        color: purple;
      }
    }
  }
`;

export default function App() {
  return (
    <div className="App">
      <Button>Default Button</Button>
      <StyledButton>Styled Button</StyledButton>
      <StyledButton>
        <DoneIcon />
        <span>Styled Button</span>
        <Typography>Typography 1</Typography>
        <Typography>Typography 2</Typography>
      </StyledButton>
    </div>
  );
}

https://codesandbox.io/s/zen-germain-2gv22?fontsize=14&hidenavigation=1&theme=dark

This approach makes use of the predefined global class names assigned to the elements, as detailed in the CSS section of the API page for each component (e.g., the Typography documentation can be found here: https://material-ui.com/api/typography/#css). In general, the primary element within a Material-UI component can be selected using MuiComponentName-root (such as MuiTypography-root for Typography).

Add hover effects to components inside MuiButton

Answer №1

Similar questions

Certain rows appear to be missing even though they are present in both the webpage and its corresponding source code

What types should you use for an Axios response in React and TypeScript?

Best Practices for Implementing Redux Prop Types in Typescript React Components to Eliminate TypeScript Warnings

React tooltip problem with vanilla Bootstrap

Organized Styled-components

Ensure that text is justified to the left both above and below inline elements contained within the parent div

Tips for avoiding the freezing of bootstrap-select scroll when a large number of options are present

I came across a small piece of CSS code that isn't functioning properly when tested on jsfiddle

React with TypeScript: The children prop of this JSX tag is specifically looking for a single child of type ReactNode, but it seems that multiple children were passed instead

Utilize CSS animation classes on multiple elements throughout a single webpage

Enhancing larger elements with a combination of CSS background-image gradients and border lines

Trigger action following a certain time frame

Seeking assistance with TypeScript promises

Utilize the functionality of the acuityscheduling API to streamline your

"Utilizing the ng-class directive in AngularJS to apply multiple

Struggling to integrate pdfform.js into a React application

Is there a way to silence TypeScript's complaints about a React rendered value being converted into a Date object?

Verify that a memoized component remains static and does not undergo a re-rendering process

The total size of the React JS bundle is 1.9 megabytes

Tips for organizing wells within bootstrap into separate columns