Utilize MaterialUI Grid to define custom styles for the ::after pseudo-element

I came across a helpful article on Stack Overflow about Flex-box and how to align the last row to the grid. I'm interested in implementing it in my project:

.grid::after {
  content: "";
  flex: auto;
}

However, I'm not sure how to incorporate this into my MaterialUI styles using JavaScript:

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  paper: {
    height: 140,
    width: 140,
  },
  control: {
    padding: theme.spacing(2),
  },
  fullName: {
    marginRight: '3px'
  }
}));

Specifically, I'm unsure how to add an after pseudo-element to a MaterialUI Grid component:

 <Grid className={classes.root} container justify="space-around" spacing={2}>
   <CompanyList companies={companies} data-test-id="companyList" />
 </Grid>
javascriptcssmaterial-ui

Answer №1

One possible solution is:

const styles = makeStyles((theme) => ({
  grid: {
    // --- add your styles here
    '&::after': {
        // --- add additional style here
    }
  },
}));

Answer №2

Here is a task similar to adding a pseudo element to a material-ui component

The content attribute must be enclosed in double quotes.

Check out this working example

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    "&::after": {
      content: '""',
      width: 40,
      height: 40,
      backgroundColor: "cyan",
      color: "white"
    }
  },
}));

export default function Material() {
  const classes = useStyles();

  return (
    <div>
      <h1>Material</h1>
      <Grid
        className={classes.root}
        container
        justify="space-around"
        spacing={2}
      >
        <CompanyList companies={companies} data-test-id="companyList" />
      </Grid>
    </div>
  );
}

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

How to customize a disabled paper-input element in Polymer 1.0?

Help with Polymer 1.0: I've encountered an issue where setting a paper-input element to 'disabled' results in very light gray text and underline, making it hard to read. I've been trying to use CSS to change the text color but haven&ap ...

csspolymermaterial-designweb-component

Binding events within other events can be achieved using D3

Trying to implement code from Scott Murray's book "Interactive Data Visualization for the Web" to create versatile bar graphs. Though the code successfully generates and updates graphs, it seems that the sorting functionality is not functioning as exp ...

javascriptd3.js

JSON conversion error: Unable to convert circular structure to JSON - locate problem within JSON structure

Currently, I am utilizing Contentful in conjunction with a MEAN stack. Upon querying the Contentful API, I receive a json object. contentClient.entries(query, function(err, entries){ if (err) throw err; console.log(entries); }); Lately, I have been e ...

javascriptjsonnode.jscontentful

Continuously spinning loading icon appears when submission button is triggered

We are currently experiencing some issues with our mobile forms. Our users utilize a mobile form to submit contact requests, but the problem arises when they hit 'submit' - the loading icon continues to spin even after the form has been successf ...

javascriptjqueryhtmlajaxforms

Sending AJAX Responses as Properties to Child Component

Currently, I am working on building a blog using React. In my main ReactBlog Component, I am making an AJAX call to a node server to get back an array of posts. My goal is to pass this post data as props to different components. One specific component I h ...

javascriptajaxasynchronousreactjs

Error when accessing JSON property in Angular with Ionic 2: A Strange TypeError

I have implemented a provider in my Ionic project to fetch the user object from storage. Below is the code: import { Injectable } from '@angular/core'; import { Storage } from '@ionic/storage'; @Injectable() export class ApiProvider { ...

javascriptjsonangularionic2

Here's a solution to prevent the "jump" effect when hiding elements in a navbar

Currently, I am facing an issue with my h5 elements within the navbar when scrolling. I am using Bootstrap 4 and jQuery for this project. The problem arises in my navbar where there are four sets containing an icon, followed by an "h5" and then a "p" elem ...

jquerycssbootstrap-4hideelement

Attempting to modify read-only properties is prohibited in strict mode within the context of [background: url({{XXX}}) no-repeat center center

I encountered an issue in Edge, but everything works fine in Chrome. I can't figure out what's causing the problem... <div class="container-fluid project_img" style="background: url({{_project.images.web}}) no-repeat center center;"> ...

javascriptangularmicrosoft-edgees5-shim

Next/image is encountering an error due to an invalid Element type being generated

Trying to utilize the next/image feature to display an SVG image is causing me some trouble. Every time I attempt this, an error message pops up: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite ...

javascriptnext.js

Unable to display Boostrap modal upon clicking href link

Can someone help me troubleshoot why my pop modal is not displaying after a user clicks on a specific link on my webpage? I have attempted the following: <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></s ...

javascripthtmlbootstrap-4

What is the best way to send information from an MVC controller to JavaScript?

Being new to programming, I am working on 2 projects that function as client-server via Rest API. I am looking to create a column chart using data from a List of ID (participant) and Votes (Total votes) obtained from the server's connection with the d ...

javascripthtmljqueryasp.net-mvcasp.net-core

What's the best way to adjust the card column for mobile view resizing?

I am trying to modify the card view for mobile devices to display as a 2-column layout. I have adjusted the flex length and grid size in my code, but I still can't achieve the desired result. Can someone guide me on how to make this change? Current d ...

css

How can I retrieve the element that the user is currently typing in within a designMode iframe?

I have a situation where I have an iframe that allows users to type and edit various divs within it. However, there is one specific div that should not be editable by the user. I have tried to prevent users from clicking on the div using JavaScript: docum ...

javascriptiframedom-eventsaddeventlistener

inconsistent firing of mousedown events

On my webpage, I am using the following JavaScript code: $("#attach-body").mousedown(function (event) { //alert(event.button); switch (event.button) { case 2: event.preventDefault(); event.stopPropagation(); break; default: ...

javascriptjquery

VS Code lacks autocomplete intellisense for Cypress

I am currently using Cypress version 12.17.1 on VS Code within the Windows 10 operating system. My goal is to write Cypress code in Visual Studio Code, but encountered an issue where the cypress commands that start with cy are not appearing as auto-comple ...

javascriptvisual-studio-codenpmcypress

Having trouble submitting the edit form

I had the idea to create an edit form that would replace the existing data in a table for editing. However, I am facing issues with getting the form to submit properly even though the create form is functioning correctly. Below is the code snippet that I n ...

javascriptc#jqueryajaxasp.net-mvc

Is it possible to hide the <dd> elements within a <dl> using knockout's custom data binding upon initialization?

I have implemented a <dl> where the <dd> can be expanded/collapsed by clicking on the corresponding <dt> using knockout's data binding. The inspiration for my solution came from a tutorial on creating custom bindings. Currently, I h ...

javascriptjquerycssknockout.jscustom-binding

Tips for creating a seamless merge from background color to a pristine white hue

Seeking a seamless transition from the background color to white at the top and bottom of the box, similar to the example screenshot. Current look: The top and bottom of the box are filled with the background color until the edge https://i.stack.imgur.com ...

javascriptcssreactjstypescriptmaterial-ui

Tips on sending asynchronous requests to a PHP page using jQuery AJAX

As a newcomer to web development, I am working on creating a social networking website for a college project. One feature I want to implement is updating the message count in the menu every time there is a new message in the database for the user (similar ...

javascriptphpjqueryhtmlajax

Update the parameter value in a URL using JavaScript

I have a URL similar to this one here. something.com/TaskHandler/search.do?action=search&category=basic&page=1&sortBy=NAME&Ascending=true&showHiddenElements=false The parameter I'm interested in is showHiddenElements, and I would ...

javascriptjquery