How to Align Buttons Perfectly in Material-UI and React

I managed to center the button with the text "Hello There", but I'm having an issue where some lines are visible on the button. I could easily fix this by adding a white background-color, but I'm wondering if there is a more optimal way to achieve this without using position: absolute. Any suggestions for better coding practices?

VIEW CODESANDBOX

 <Stack
    alignItems={"center"}
    sx={{
      marginTop: 2,
      position: "absolute",
      display: "flex",
      left: 0,
      right: 0
    }}
  >
    <Button variant="outlined">Hello There</Button>
  </Stack>
cssreactjsmaterial-ui

Answer №1

The Button variant you have selected is varian="outlined", which results in a transparent background. This causes the button to appear behind the dashed border. To maintain this button style, you can add a white background-color to it. Alternatively, you can switch to the contained variant as shown below, but this will change the button's style.

<Button variant="contained">
  Hello there
</Button>

UPDATED:

If you prefer not to add a background-color to the button, you can use :after or :before pseudo-elements on the button to create an element behind it that hides the dashed border. Keep in mind that this solution may not work well with dynamic backgrounds, images, or gradient colors.

<Button
          variant="outlined"
          sx={{
            position: "relative",
            zIndex: "1",
            "&:before": {
              content: `''`,
              background: "white",
              width: "100%",
              height: "10px",
              position: "absolute",
              zIndex: "-1"
            }
          }}
        >
          Hello There
        </Button>

Answer №2

Your inquiry could use some clarification, but allow me to share my thoughts on the matter.

<Container
style={{
    paddingTop: 10,
    position: "relative",
    width: "100%"
}}
>
<Button
    variant="contained"
    style={{
    margin: "0 auto"
    }}
>
    Greetings
</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

Excessive space consumption by children in MUI Grid

I am facing an issue with rendering two large blocks of text side by side, which may contain new lines or no whitespace. I have been using Material UI's Grid, but the grids are not behaving as expected. To illustrate my problem, I have provided a sma ...

reactjsmaterial-uimui-x

Is it possible to retrieve data in the background when launching an app in React Native?

When my React Native application starts up, I am looking to retrieve data from an external API. Should I initiate this process in the componentDidMount lifecycle method of my main component? Are there alternative approaches recommended for handling this? ...

reactjsreact-native

Is there a way to update the Redux state within a function instead of a component?

Upon loading an external library, my onReady callback is triggered whenever a global object is successfully loaded. The object is only loaded after authentication is completed. Some pages require authentication while others do not, so I want to avoid load ...

reactjsredux

Ensuring the first item is always active in the Bootstrap carousel in Reactjs when data is updated

My carousel contains an array of image links stored in data.img <div id="carouselExampleControls" className="codeinfo__carousel carousel slide" data-bs-ride="carousel" > <div c ...

reactjsbootstrap-5

Troubleshooting textarea resize events in Angular 6

In the development of my Angular 6 application, I have encountered an issue with a textarea element. When an error occurs, an asterisk should be displayed next to the textarea in the top-right corner. However, there is a gap between the textarea and the as ...

javascripthtmlcssangular6

Discover the optimal method for integrating a Next.js CSR React application with Django and PostgreSQL

I have a question about developing a full-stack app. Currently, I am using a Next.js React app on the frontend and a Django app with a PostgreSQL database on the backend. There are two main approaches I have seen to integrate all of these components seaml ...

reactjsdjangopostgresqldjango-rest-frameworknext.js

How can I showcase both a username and email address in a Material UI chip?

I'm currently using Material UI chip to show name and email next to each other. However, when the name is long, the email goes beyond the chip boundary. Here's my function that generates the chips: getGuestList() { let {guests} = this.sta ...

htmlcssreactjsmaterial-ui

I find the JSX syntax to be quite perplexing

While examining some code, I came across the following: const cardSource = { beginDrag(props) { return { text: props.text }; } }; When working with JSX block code or building objects, I usually use {}. The cardSource variable in this co ...

javascriptreactjs

What is the best way to eliminate the default active background color in ReactNative Material Bottom Tabs version 6.2.10?

Can someone help me figure out how to remove the background color from the image linked below? I've tried various properties in the documentation but nothing seems to work. https://i.stack.imgur.com/mD8gW.png ...

react-nativematerial-uireact-native-navigationreact-navigation-v6

Tips for preserving specific information obtained through an API call

I am currently working on a project where I need to make a POST request to my Ruby on Rails backend using information obtained from an API. My tech stack includes React.js and Ruby on Rails. https://i.stack.imgur.com/4Fls9.png Here's a brief overview ...

reactjsruby-on-rails

What is causing the classList function to throw an error: Uncaught TypeError: Cannot read properties of undefined (reading 'classList')?

There's an error that I can't figure out: Uncaught TypeError: Cannot read properties of undefined (reading 'classList') console.log(slid[numberArray].classList) is working fine, but slid[numberArray].classList.add('active') is ...

javascripthtmlcss

Error message: Next.js throws a ReferenceError stating that the 'exports' is not defined

I have encountered an error while using react-datetime-picker v3.5.0 with Next.js. Unhandled Runtime Error ReferenceError: exports is not defined Call Stack eval node_modules/react-datetime-picker/dist/DateTimePicker.js (8:0) ./node_modules/react-datetime ...

reactjsnext.jsreact-datepicker

Shining a component (or persona) however essentially duplicate a distinct term

Is it possible to highlight an element or word, but still copy a different word when hitting ctrl+c? For example, imagine I have an emoji represented by: Original text: :heart: Output in HTML: <span background={...logic here}></span> I am ...

javascriptreactjshighlight

Cannot find property '' within type 'never'. (Using TypeScript useState with mapped JSON data from a server)

Currently, I am following a tutorial on using React with Material-UI and decided to add TypeScript into the mix. If you're interested, here is the link: Net ninja MUI The file Notes.tsx contains the code for fetching data from a JSON server and then ...

reactjstypescriptmaterial-uijson-server

I am having trouble properly positioning an icon next to its corresponding text within a menu item

I'm a newcomer to the world of HTML5 + CSS3 and I'm having trouble with aligning menus, text, and icons within the menu. Here's the issue: Each line of the menu consists of an icon and a text description. The problem is that they are too clo ...

htmlcssweb

Updating data in a MongoDB database and displaying it in the user interface

Client-side coding...!!! I am looking to update the quantity when the Delivered button is clicked... In this section, I am displaying the quantity from the database. const [reload, setReload] = useState(true); const [stock, setStock] = useState({}); co ...

node.jsreactjsmongodbexpress

What are the steps to incorporate fading effects into a jQuery popup box?

Currently, I have implemented a jQuery function to display a popup box using .show() and hide it using .hide(). Is there a way to incorporate charming animations such as fading into the popup box? // display pop up $('.mypopup').show(); // con ...

jqueryhtmlcss

Most effective method for transferring data to linked selection fields across multiple components

I apologize for the recent influx of questions, but our volunteer mission is scheduled for December and I have a lot to accomplish. These initial inquiries will assist me in completing the remaining tasks! At this point, I am seeking the most effective me ...

reactjsnext.jsformik

Font discrepancies in HTML field types "text" and "textarea" are causing inconsistent font display

Why do the text in my "text" and "textarea" fields show different fonts on my pages' HTML? I attempted to specify the font type in both the background CSS file and within the HTML, but it did not resolve the issue. Just to be transparent...I'm ...

htmlcsstexttextarea

What is the best way to extract data from an array of objects in a JSON response?

I am currently exploring the utilization of API's in React. Right now, I am developing a search input feature for country names using the Rest Countries API. The data is being pulled from . However, I am facing a challenge in handling this data as it ...

javascriptjsonreactjs