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

"Although the NextJS client-side data is present, it seems to be struggling to

Exploring Material UI choices and retrieving the selected option's value

Issue encountered: React build fails to load without including index.html in URL during deployment on AWS S3 and Cloudfront

Create a hover effect on HTML map area using CSS

The poker table designed with CSS does not resize effectively when displayed in smaller dimensions

Converting images to greyscale or transparency within a ReactJS component

What are the steps for utilizing CzmlDataSource within React Resium?

What is the procedure for verifying the type of an element using chai?

JS and MUI are combining forces to create a dynamic background change on the page when selecting items from a dropdown menu

The art of aligning Material UI Grid elements

Bootstrap 3 Full-Width Responsive Image Overlapping

What is the issue with assigning type {intrinsicattributes & true} or type {intrinsicattributes & false} in a React and TypeScript environment?

Hiding the author, category, and date information from displaying on WordPress posts

Only include the query parameter in the GET request if the optional field has been filled out by the user on the form

Achieve vertical scrolling within a div of a set width employing CSS

Personalizing HTML input fields

Tips for mastering web design techniques

When multiple files are used, .env does not return any values

What is a method to prevent a div from being rendered in CSS, rather than simply hiding it from view

In the event that conflicting media queries take precedence over one another