How to properly set margins for button components in Material UI

I'm working with a centered Toolbar in Material UI that consists of 3 components, each being a button. My goal is to add some margin around each button. I attempted to use the {mt} option within the component button, but didn't see any changes reflected. I've also been playing around with makeStyles for styling, but haven't quite cracked it yet.

<Box display="flex">
  <Box m="auto">
    <Toolbar>
      <SeasonComponent>
      <WeekComponent>
      <GameComponent>
    </Toolbar>
  </Box>
</Box>

Season component:

return (
  <div>
    <Button 
      variant="outlined" 
      color="primary" 
      onClick={handleClickOpen}
      mt={2}
    >
      Button text 
    </Button>
</div>

Displaying an image showing the buttons:

cssmaterial-ui

Answer №2

To avoid upgrading my repo to version 5 immediately, I decided to insert a hidden button in between the existing buttons. It may not be the ideal solution, but it did help resolve the issue for the time being.

// SpacerButton.js
import React from 'react';
import Button from '@material-ui/core/Button';

const style = {
   minWidth: 1
}

export default function SpacerButton(props) { 
  return (
    <Button variant="text" style={style}>
      
    </Button>
  );
}

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

Caution: React is unable to identify the `PaperComponent` prop on a DOM element

Trying to create a draggable modal using Material UI's 'Modal' component. I want users to be able to move the modal around by dragging it, so I decided to use 'Draggable' from react-draggable library. However, I encountered this er ...

javascriptcssreactjsmaterial-uimodal-dialog

Problem with holding a dropdown button

Having trouble maintaining the position of this button within the floating button holder above my website content. How can I incorporate a drop-down menu while ensuring it stays within the same button holder? .btn-holder { backgr ...

css

IE6 is not displaying the tag styles correctly

My website has a section that shows two links next to each other. While it's displaying correctly on most browsers, it seems to have issues specifically in IE6. You can view the issue on this fiddle. Can anyone shed some light on why this is happenin ...

htmlcssinternet-explorer-6

Learn how to display two rows of div elements within a single div container

In my program, I am using a for loop to display multiple div elements in one row. The first div is showing up correctly, but I am having trouble inserting a new div that looks the same as the first one. How can I achieve this? Thank you in advance. "first ...

phphtmlcss

Tips for concealing duplicate columns resulting from the use of groupingValueGetter in Material-UI DataGrid

When looking at the code sandbox provided in this link: https://codesandbox.io/s/row-grouping-li67j6?file=/demo.tsx:696-764 I noticed that there are two columns labeled "Datetime". The second column displays "Invalid Date" as the group header, and I am lo ...

reactjshtml-tablematerial-ui

Center alignment within input-group-prepend using Bootstrap 4

Is there a way to create a fixed width input-group-prepend that is larger than its content, while still keeping the content centered horizontally? I've experimented with text-center and align-items-center, but the content always ends up left aligned. ...

csstwitter-bootstrapbootstrap-4

Tips for centering the search popup in jqgrid

Having trouble centering the Search popup in my jqgrid. Every time I click on the search button in jqgrid, the Search popup appears at the beginning of the grid. $(document).ready(function(){ //jqGrid $("#usersList").jqGrid({ ...

jquerycssjqgrid

Toastr service experiencing issues on Internet Explorer browser

While implementing toastr notifications in my Angular application, I encountered an issue with compatibility across browsers. Specifically, the ngx-toastr module functions properly in Chrome and Firefox, but not in Internet Explorer. Interestingly, it wo ...

cssangularngx-toastr

CSS - Absolute positioning appears to be slightly choppy in Microsoft Edge

I have successfully implemented a slip scrolling function to reveal/hide a fixed logo on scroll, but I am facing some issues with Microsoft Edge browser. While testing in various browsers, everything works smoothly except for Microsoft Edge. In this brows ...

javascriptjqueryhtmlcssmicrosoft-edge

Arranging elements within the flex container in perfect alignment

I'm stuck trying to figure out how to adjust the layout of a flex container with three child elements. Here is the code I'm working with: html,body,div {margin:0;padding:0;} .cont { display: flex; justify-content: space-between; height: ...

cssflexbox

Learn how to implement a split background effect by simply clicking the SPLIT button

let context = canvas.getContext("2d"); // for canvas size var window_width = window.innerWidth; var window_height = window.innerHeight; canvas.width = window_width; canvas.height = window_height; let hit_counter = 0; // object is created using class clas ...

javascripthtmlcsscanvashtml5-canvas

Required form fields are a must when utilizing Material-UI Form and React Testing Library

I'm currently working on testing an MUI form using @testing-library/react. The form consists of required fields, and I need to verify this behavior. Here is the structure of the form: <form id='xml-form' onSubmit={handleSubmit}> ...

reactjsformsmaterial-uireact-testing-library

Attempting to align a banner image in the middle using CSS styling

I'm having some trouble getting the banner image to be centered on all screen sizes. It looks good on smaller screens, but on larger ones it seems to be shifting to the left. Here's what I've attempted so far: .banner { padding-top: ...

css

I'm curious to know if there is a tree select component that is built on Material

I've been searching for a reliable component that offers clear API documentation and allows me to display a "tree view" structure for a select input within a form. The closest option I found is vue-treeselect, which provides many useful features like ...

reactjsinputmaterial-ui

How to implement automatic scrolling in a material UI Tab component using React

Currently, I am facing an issue with the tabs while using material design UI react components for the frontend in react. I would like the page to automatically scroll down a bit when any of the mentioned tabs are clicked. At the moment, clicking on a tab d ...

reactjstabsmaterial-ui

The div is not showing the image as expected

Having some trouble creating a slideshow within my angular application. Struggling to get the images to display in the html code. To tackle this, I decided to create a separate component specifically for the slideshow (carousel.component). In the main app ...

cssangular

Create a filled Material UI icon symbol

For my React app utilizing the Material UI library, I have incorporated Icons as symbolic representations. By including the baseClassName: 'material-symbols-rounded' in all icons through the global theme.js file: MuiIcon: { defaultProps: { baseCl ...

reactjsmaterial-uiiconsgoogle-material-icons

Creating a HTML and JavaScript carousel without relying on the animate function

I am currently facing some challenges with building a custom slider. While it moves forward smoothly using CSS animation, I'm struggling to implement a backward motion with an animation. It seems like I need to loop through the slides and try a differ ...

javascriptjqueryhtmlcss

Show specific modal or image depending on various criteria

Seeking guidance on how to achieve the following tasks in a simple manner as my understanding of HTML, Bootstrap, and CSS is basic: 'When radio button #1, radio button #4, and button #2 are clicked, upon submission display modal 1 with an image at a ...

htmlcsstwitter-bootstrap

Ensure that Mathjax underscores are consistent with the height of other characters

Presented below is the latex code being used with Mathjax. \class{mathjaxCursor}{\text{_}} ...and here is the accompanying css: .mathjaxCursor { font-weight: bold; background-color: red; } This setup results in the following display: ...

htmlcssmathjax