Float over Material UI Icon and Text

Question

Float over Material UI Icon and Text

Currently, I am tackling a React JS Project. My task involves creating a breadcrumb that contains both text and an icon. To accomplish this, I have incorporated a material UI icon.

          import UpdateIcon from "@material-ui/icons/Update";
          import styles from " myfile.module.css "

          <div className={styles.headItem}>
              <UpdateIcon
                className={classes.bread}
              />
              <h1
                className={styles.bread}
              >
               Bread Text
              </h1>
            </div>

Nevertheless, I have encountered an issue: I aspire to define the hover effect for both the icon and text collectively. Unfortunately, due to utilizing a module file for standard HTML elements and makeStyles for Material UI components, I find myself unable to apply the hover effect universally. Despite attempting to set the headItem class, it refuses to take effect.

css reactjs material-ui

Answer 1

Answer №1

If you're looking to update your approach, one suggestion is to adjust how you import CSS styles. By importing them directly, you have the flexibility to treat classes as regular strings.

import "./styles.css";

Let's say your styles.css file contains a class that defines standard styling for breadcrumbs:

.head {
 text-decoration: underline;
 text-transform: uppercase;
}

You can then use this class in your project like so:

import React from "react";
import UpdateIcon from "@material-ui/icons/Update";
import "./styles.css";
import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
 bread: {
  "&:hover": {
   color: "green"
  }
 }
});

export default function App() {
 const classes = useStyles();
  return (
   <div className={`head ${classes.bread}`}>
    <UpdateIcon />
    <h1>Bread Text</h1>
   </div>
  );
 }

In this snippet, we reference the CSS class from styles.css as a string and incorporate the Material UI class variable with string interpolation. Feel free to check out the results in this sandbox:

Answer 2

If you're looking to update your approach, one suggestion is to adjust how you import CSS styles. By importing them directly, you have the flexibility to treat classes as regular strings.

import "./styles.css";

Let's say your styles.css file contains a class that defines standard styling for breadcrumbs:

.head {
 text-decoration: underline;
 text-transform: uppercase;
}

You can then use this class in your project like so:

import React from "react";
import UpdateIcon from "@material-ui/icons/Update";
import "./styles.css";
import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles({
 bread: {
  "&:hover": {
   color: "green"
  }
 }
});

export default function App() {
 const classes = useStyles();
  return (
   <div className={`head ${classes.bread}`}>
    <UpdateIcon />
    <h1>Bread Text</h1>
   </div>
  );
 }

In this snippet, we reference the CSS class from styles.css as a string and incorporate the Material UI class variable with string interpolation. Feel free to check out the results in this sandbox:

Float over Material UI Icon and Text

Answer №1

Similar questions

Tips for making Google search results include query strings in the returned links

Utilize the splice function when resizing the window based on specific breakpoints

Disabling the ripple effect on the primary action in React Material lists: A Step-by-Step

Node.js seems to be frozen following the "npm run dev" command

By simply clicking a button in a React component, I aim to alter the font style of the text

Clickable rows with MUI table icon buttons that enhance user interaction

What is the best way to implement automatic scrolling to the bottom of a materialUI drawer in React after a page refresh?

Issue with Vue2: DIV does not adjust height when using v-for loop

CSS to target every second visible tr element using the :nth-child(2n)

A customizable and adaptable Tetris-inspired CSS design perfect for any screen size

Looking for advice on using media queries to resize my background image - any tips?

What could be causing my footer to be stuck in the center of my webpage?

How to display an external link page in a popup using React

Am I going too deep with nesting in JavaScript's Async/Await?

Scroll upwards within a nested div

What is the best way to arrange <div> elements with text inside without moving the text?

Hover Effects for CSS Info Boxes

Retrieve data from an array of JSON objects within a JSON object using ReactJS

Guide on manipulating the value of a React Material UI Slider using Cypress

Looking to align a radio button in the middle of an inline-block?