I'm having trouble getting the "spacing" styling attribute to work in Material UI when I attempt to space out elements within my Box component. Can anyone explain why this might be happening?

Within my React 16.10 application, I am utilizing materialUI components. Specifically, I have incorporated two buttons inside a Box element.


<Box
          style={{
            marginTop: "3rem",
            marginLeft: "1rem",
            display: "flex",
            justifyContent: "center",
    spacing: 1,
          }}
>
<Button onClick={handleSave} variant="contained" color="primary">
SAVE
</Button>

<Button
onClick={toDetailsView}
startIcon={<CancelIcon />}
variant="contained"
color="primary"
>
CANCEL
</Button>
</Box>

Despite including the property "spacing: 1", the buttons are displaying as if they are directly adjacent to each other, making it difficult to differentiate between them...

https://i.sstatic.net/znsmq.png

How can I apply styling that introduces some space between these buttons?

Answer №1

Searching for a quick solution? padding: 1rem;

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 React DevTools display components with the message "Currently Loading."

I am currently facing an issue with debugging some props used in my React application. When I try to inspect certain components, they display as "Loading..." instead of showing the normal props list: https://i.sstatic.net/RtTJ9.png Despite this, I can con ...

CSS animation is supported on most browsers with the exception of Safari

I'm facing an issue with my animation that works fine on all browsers except Safari. I've tried using the autoprefix extension in VSCode to automatically add CSS vendor prefixes, but the animation still isn't functioning correctly. Here&apo ...

Extension for Chrome - Personalized pop-up notification when page loads

I am looking to create a custom alert box that triggers on page load instead of the default one, which I find unattractive and possibly irritating for users. alert('hello'); My current approach involves the following code: manifesto.js "cont ...

What is the best way to organize notifications by dates in a React application?

I'm currently working on a notifications component where I need to sort notifications by dates and then display them. Although I attempted the following code, it didn't work as intended: const result = notifications.notificationRows.sort((a, b) ...

Improving React Components with Material-UI Integration

Is it possible to export a class extended from React.Component while using React and Material-UI? I need to access React variables like state within the class. If exporting the extended class is not an option, how can I still utilize state? Here is a samp ...

Tips on creating an inline editable cell in a Tree View

I've been working on a category tree that includes expand and collapse buttons. You can see what I have so far here: Category Tree Now, I'm looking to make each item inline editable. Can someone guide me on how to achieve this? If you want to t ...

Enable the automatic hiding of the filter menu in MUI DataGrid when the enter key is

Is there a method to automatically close the filtering menu in MUI DataGrid when pressing the enter key? Currently, we have to click elsewhere to hide it. This issue pertains to: ...

Unlocking the Potential: Unveiling the Art of Activating Navigation in Single-Page Websites

I am currently developing a one-page website. In order to enhance the navigation experience, I want the active section or "page" to be visually highlighted in the navigation bar. At present, when I click on a link, it successfully displays with an underlin ...

Determine the precise location of a screen element with jQuery

Can anyone help me determine the precise position of an element on the current visible screen using jQuery? My element has a relative position, so the offset() function only gives me the offset within the parent. Unfortunately, I have hierarchical divs, ...

Arranging images effortlessly using jQuery sortable feature in HTML

I'm currently working on creating sortable images using jQuery in an HTML document. I've encountered an issue with the source code here. I have implemented the jQuery sortable function in a functions.js file and successfully tested it on another ...

What is the best way to hide the menu bar on a particular window using electron?

In my application, there is a menu that opens the document properties window when clicked. However, I am facing an issue where the application menu gets inherited by the document properties window itself, allowing you to open another document properties wi ...

What is the best way to contain my content within a bordered box?

As a beginner in HTML and CSS, I have successfully created a basic website with a simple menu at the top that includes links to different pages like "Home," "About," and "Contact." The website will mainly feature information and images, but I believe it wo ...

How can I combine my Authorization Header with httpLink in Apollo Client and Next Js?

I've been developing an application that requires authentication to create posts. To achieve this, I created two objects - httpLink (connecting to the backend) and authLink (handling the passing of headers in the form of a Bearer token). Below is a s ...

Choose an element at random

I am trying to figure out how to select all div elements with the same class of "dot" under a parent div in JavaScript. Here is an example structure: <div id="dots"> <div class="dot"> . </div> <div class="dot"> . </div> ...

How can I prevent a nested Table from inheriting the style of the parent table?

Just to clarify, I'm not using tables or any other styling methods like that on my page. I have a simple table that lists services, prices, and PayPal buttons for adding to the cart. While everything is functioning properly and looks good, there are ...

What are some ways to adjust the size of the option field in a select menu?

In my ionic popup, I have a HTML property called select with nested options. Below is the code snippet along with the applied CSS. My query is how can I set the white space to occupy the entire area of the select? https://i.stack.imgur.com/iPqAa.png http ...

React form submit button failing to submit upon clicking

Dear experts, I am facing an issue with my registration form created using React.js and Formik. The submit button appears correctly, but when I click on it, nothing happens. Can you please provide guidance on how to resolve this issue? Thank you in advance ...

Exploring ways to efficiently narrow down results by ID in a graphql query

I'm struggling to understand where I should include a filter parameter in the graphql query below. Despite reading through the documentation, I haven't been able to determine how to incorporate it. It's important for me to maintain the pagin ...

Verify whether a div element is styled in a specific manner

Upon initial load of my website, if the page is maximized or in fullscreen mode, the comBrand div will have specific CSS properties applied. However, during a resize event, I use the .css() function to adjust the properties of this element so it doesn&apos ...

Comparison between socket.io and swr for live content updates

Currently, I am in the process of developing a web application using next.js that requires real-time updates across multiple devices. For example, when someone joins a group, all existing members should immediately see this update. Initially, I have been ...