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

Developing a placeholder directive with AngularJS

Are you looking to create a unique element in AngularJS to facilitate nested ng-repeats? Take a look at the example below: data.test = [{h:1, d:[11,12]}, {h:2, d:[21,22]}]; ---------------------- <custom ng-repeat="a in data.test"> <h3>{{a ...

javascripthtmlangularjsangularjs-directiveangularjs-ng-repeat

Best practices for integrating Vuex with Vuelidation

Currently, I am developing a Vue front end for an application that necessitates storing all form data locally before sending it to the backend in case of any network connectivity issues. To achieve this, I am using Vuex to manage and retain all the necessa ...

javascriptvue.jsvuejs2vuexvuelidate

The splash screen fails to show up when I launch my Next.js progressive web app on iOS devices

Whenever I try to launch my app, the splash screen doesn't show up properly. Instead, I only see a white screen. I attempted to fix this issue by modifying the Next Metadata object multiple times and rebuilding the PWA app with no success. appleWebApp ...

javascriptiosnext.jsprogressive-web-appsmanifest

I am having trouble getting my divs to show up side by side in one line

I am struggling to get the second div (right-column) to move next to the first div (left-column) in order to create 2 columns of links. I would prefer not to create a separate stylesheet for this small page. <div class="container" style="height: 700px; ...

htmlcss

Commitments when using a function as an argument

While I have a good understanding of how promises function, I often struggle when it comes to passing a function as a parameter: var promise = new Promise(function(resolve, reject) { // Perform asynchronous task ec2.describeInstances(function(err, ...

javascriptfunctionparameterspromise

In the world of web design, blank areas can sometimes appear on a page as you

My website has a fixed header with a height of 44 pixels, content that takes up 89% of the screen, and a footer that occupies 6% of the space. Everything looks fine when the browser is at 100% zoom, but as I zoom out, white spaces start appearing before th ...

htmlcsswebbootstrap-4

The AJAX onreadystatechange function may not be consistently triggered

I have an issue with my AJAX call to retrieve XML data. It seems that the code does not enter the onreadystatechange function until the last iterations of my foreach loop. This delay is likely due to the time it takes for the calls to "www.webpage.com/" ...

javascriptajaxxmlreadystateonreadystatechange

One-way communication between two clients using Socket.io

While working on a basic socket.io application using React and Express, I've encountered an issue where two clients are facing difficulties in sending data to each other. For instance: Player 1 connects to the server followed by Player 2. Player 1 ...

javascriptnode.jsreactjsexpresssocket.io

Tips for persisting form values even after refreshing the page - a guide to setting form values that stay in place

When I submit a long form, an external JavaScript validation is triggered to check the input field validity. If all fields pass validation, a jQuery modal appears prompting the user to either register or log in. If the user chooses to register and complet ...

phpjavascriptjquery

The subscription for the second Observable in RxJS concatMap is triggered individually

I am currently developing an Angular 6 application. I want the app to display a loading animation whenever there is a change in the route or if there are any pending HTTP requests. To achieve this, I have set up two Observables as follows: For httpPendingR ...

javascriptangulartypescriptrxjs

Reduce the length of the text and display it upon hovering with the mouse

I am trying to figure out how to truncate text and have it expand on mouseover in a paragraph element. I attempted to truncate the content using a specific code, but I encountered an issue. While my current code expands the content when clicking on the el ...

javascriptjqueryhtml

Struggling to calculate the total of a property within an array of objects

I'm currently trying to calculate the sum of a specific property within an array object. Although I successfully accomplished this in one component, I am encountering difficulties replicating it in another. The error message being displayed is: this. ...

javascriptvue.js

Return to the beginning using Jquery Mobile

Currently, I am working on developing a mobile web app using jQuery Mobile. I am now looking to implement a back-to-top action. Typically, this can be done with the following code snippet: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

jqueryhtmlcssjquery-mobileanchor

AngularJS - Not binding $scope to the DOM

Recently starting out with Angular, I decided to practice by creating a simple website. One of the features I want to include is displaying the number of times a button has been clicked through data binding. Here's the controller code I've writte ...

javascriptangularjsscope

struggling to get the styled components from @mui 5 to function properly

I've been following the steps outlined on mui's official website to implement version 5 of the framework. Despite everything going smoothly, I'm facing some challenges with getting the styled components to work properly. To give you a bette ...

reactjsmaterial-uistyled-components

Filtering an Array in VueJS Based on User Input

Currently, I am working on a Vue.js application where my goal is to filter an array based on user input from a form. The issue I am facing is that the array named autocomplete is not being populated with visitors that match the query of the first name. T ...

javascriptvue.jsvuejs2

Upgrading to NPM version 7 or higher: A guide to effectively installing packages using the "lockfileVersion" parameter: 1

After upgrading NodeJS to version 16, I noticed that NPM version 8 is now included. This means that when I install packages, the package-lock.json file is generated with a "lockfileVersion": 2. However, I prefer the older format of "lockfileVersion": 1. ...

javascriptnode.jsnpmpackage-lock.json

What is the best way to utilize recently added modules in React if they are not listed in the package.json "dependencies" section?

[I have updated my question to provide more details] As a newcomer to working with React, I may be asking a basic question. Recently, I installed several modules and will use one (example: @react-google-maps/api) for clarification. In my PC's termin ...

javascriptreactjsnpmnpm-installpackage.json

Firefoxy can't seem to get through the navigation keys within an element that has a hidden

Check out this fiddle I created: http://jsfiddle.net/c11khcak/13/. My goal is to hide the scrollbar of an element while still allowing it to be scrollable using the mouse wheel and up/down navigation keys. I've been able to achieve this using some bas ...

htmlcssfirefoxscroll

Enlarge the div with a click

I was looking for a solution on how to make a div expand when clicked using jQuery I came across a tutorial that seemed simple and perfect, but I couldn't get it to work when I tried to replicate the code. Do you know if this code is still valid wit ...

javascriptjquerycssonclick