Creating borders around Material UI grid items can be achieved by applying a border style to the

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';

const useStyles = makeStyles((theme) => ({
  container: {
    border: '4px solid green',
    display: 'inline-flex',
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
}));

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

  return (
    <div className={classes.root}>
      <Grid container justify="center" className={classes.container}>
        <Grid item xs={4}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
        <Grid item xs={4}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
      </Grid>
    </div>
  );
}

I wish to have my border only around the two items in the Grid container instead of taking up the full width. I tried adding inline-flex to the parent container, but it didn't solve the issue.

Answer №1

To implement the desired styling in your useStyle function, you need to include the following properties in the return object:

container: {
    border: '4px solid green',
    display: 'inline-flex',
  },
  item: {borderRadius: 30px}, 
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },

In addition, make sure to add the following line within your code:

<Grid item xs={4} classeName={classes.item}>

If you have any doubts or concerns regarding this implementation, please feel free to leave a comment.

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

the combination of class and type functions as a jquery selector

<button class="actionButton default" type="submit"> Save</button> Can you select this button by both its class and type using a jQuery selector? I attempted the following, but it did not work: var saveBttn = $('.actionButton.default [ty ...

The presence of the StickyHeader Row is causing an obstruction in the drop down list view

I have successfully made the row header of the Material UI Table component sticky by utilizing the stickyHeader attribute. <Table stickyHeader className={classes.table}></Table> Above this table, there are two drop-downs that are created using ...

Adding text over an image in Tailwind without the need for absolute positioning is achievable

I'm struggling to position text over an image without using absolute positioning. It's working fine on large and small screens, but I'm having trouble with medium screens. I've searched for similar questions on Stack Overflow, but none ...

How can I display a minimal number of rows in a Multiline TextField in Material UI with ReactJS without any scrolling beyond that limit?

When using Material UI Texfield for multiline input, I am looking to display a minimum of 3 rows initially and then have the text area expand further without showing a scroll bar if the content exceeds 3 rows. I attempted the following: <TextFi ...

Stop horizontal scrolling when using connected lists in full-height columns with jQuery UI Sortable

I am in the process of developing a web application that features two full-height columns utilizing Flexbox in Bootstrap v4. Each column contains a sortable list that can be rearranged using jQuery UI Sortable. HTML: <div class="container-fluid h-100 ...

Why is it beneficial to integrate a state management library in a server-rendered application?

While working with NextJS to serve a SSR application, I have come across recommendations to use a state management library. In my experience, I am accustomed to using a state management library for client-side rendered applications, but I am unsure of it ...

Developing a custom function that analyzes two distinct arrays and sends any corresponding pairs to a component

I'm in the process of developing a component that utilizes two arrays. These arrays are then mapped, and the matching pairs are sent down as props to a child component. The goal is to create a list component that retrieves the arrays from the backend ...

Tips for dynamically adjusting an iframe's content size as the browser window is resized

Currently, I am in the process of building a website that will showcase a location on a map (not Google Maps). To achieve this, I have utilized an iframe to contain the map and my goal is for the map to adjust its width based on the width of the browser wi ...

What is the most effective way to display or conceal "exclusive features" depending on the user's status?

Currently, I have set up a Ruby on Rails backend for managing user authentication and processing payments using Stripe. The web app I am developing consists of three tiers of functionality: guest users, logged-in users, and premium users. After the authen ...

Execute two scripts that do not terminate in the package.json file

I am attempting to initiate a json-server and launch my React-App using the same script in my package.json file... Unfortunately, when I run the script, neither of the two commands return to the prompt, preventing the second script from being executed... ...

Flex container scrollable element not functioning consistently between different browsers

Today, I've spent most of my time experimenting with various solutions but I'm facing difficulty making them work consistently across different browsers. My goal is to have 2 sections within a fixed div: the first section with a set height and t ...

I am currently working on making my social items more responsive, however, I am encountering some issues. Any ideas or suggestions on how to resolve this

Find my resume project on GitHub at https://faizan-ul-hasnain.github.io/Resume-Project-/ and let me know how to improve it. Visit my resume project here ...

There seems to be an issue with the import class for React PropTypes. The prop

I have multiple oversized items that are utilized in numerous components, so I created a PropTypes file for each item. For example: PropTypes/PropLargeObject.js This file contains: import PropTypes from "prop-types"; const PropLargeObject = Prop ...

Issue with Grid Column in React-Material UI

Using React App and Material-UI library for styling, I've fetched data from an open API to pass to a child component and display in three-column cards in one row. Despite multiple attempts following Material UI documentation, I haven't been able ...

Evaluating React components in Rails using capybara and spinach

Currently, I am in the process of developing a Rails application that utilizes React components for its layouts. Below is an example: .pure-g.homepage = react_component("SectionA", {foo: @bar}, class: "pure-u-1") = react_component("SectionB", {foo: @b ...

In React, the state's value will revert back to its initialState whenever a new value is assigned

My App component has a simple functionality where it controls the state of a value to display a header. By using an onClick function, I'm updating the isHeaderVisible value to True in the Home component when a logo is clicked and another route is take ...

Struggling to locate the Twitter direct message input box with Xpath in Selenium

I have been struggling to locate the textbox element using the find_element_by_xpath() method. Unfortunately, every time I try it, I receive an error stating that the element cannot be found. Here is the specific line of code in question: Despite attempti ...

Interactions of selecting dates in datepicker widget

Currently, I am working on developing my personal work website. One issue I have encountered is with the calendar feature. The "From" date can be selected before today's date, which is not ideal. Additionally, if a date 5 days from now is chosen as th ...

Ways to eliminate a particular element from the React state

I need help removing a specific item from my React state. Current scenario: When certain checkboxes are selected, I update their state accordingly. My useEffect hook has the checkboxes state as its dependency, and every time there is a change, I add cont ...

What is the technique for rearranging columns to be at the top in Foundation for mobile devices?

On my desktop, I have a layout like this: [Column1 large-8] [Column2 large-4] For mobile view, I'd like it to be like this: [Column2 large-4] [Column1 large-8] Below is the code snippet I am working with: <div id="search-content" class="row ma ...