How to align Material UI's <TextField> component in the middle of a React project

I'm struggling to align two <TextArea> components using material ui and React.

Both of them are contained within the same <div> and share the same className. Despite trying to apply the !important rule in CSS, I haven't been able to center the MUI elements properly. Interestingly, a standard <input> behaves as expected when styled with the same CSS properties. How can I achieve proper alignment for the <TextField> components?

JSX

<Container maxWidth="md">
<TextField
id="outlined-read-only-input"
label="Username"
/> 
<TextField
id="outlined-read-only-input"
label="Password"
/> 
</Container>

CSS

.login__input {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 20px !important;
  width: 300px !important;
}


  [1]: https://i.sstatic.net/qu0xa.png
cssreactjsmaterial-ui

Answer №1

Consider using Grid elements to help with layout.

Check out this link for more information on using Grid elements

<Grid container justifyContent="center" spacing={2}>
 <Grid item xs={10}>
  <TextField
   id="outlined-read-only-input"
   label="Username"
  /> 
 </Grid>
 <Grid item xs={10}>
  <TextField
   id="outlined-read-only-input"
   label="Password"
  /> 
 </Grid>
</Grid>

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

When trying to set previous data in my React app upon cancel click, I encountered an issue

After successfully rendering dynamic fields from JSON data on the UI, I encountered a specific issue. Initially, all the fields are disabled. Upon clicking the edit button, I am able to make a particular row editable, which works fine. However, when I cli ...

javascriptreactjsreact-hooks

How can I access the cross icon on the search component in Material UI?

Is there a method to modify the styles of the cross icon within the Material UI InputBase search component? I want to adjust its color, size, and thickness. https://i.sstatic.net/XkL3t.png My setup includes React v16, Material-core v4.9.1, and Material-ic ...

reactjsmaterial-ui

Launching all collapse features with React Bootstrap

I discovered this example at this source and made some updates to include an additional button with a collapse component. function Example() { const [open, setOpen] = useState(false); return ( <> <Button onClick={() => setOpen(!open)} ...

reactjsbootstrap-4react-bootstrap

Is the order in which properties are executed always the same in CSS rules?

Have you ever wondered about the way browsers handle CSS properties within the same rule? The topic of rules precedence has been discussed at length, but this specific question focuses on the execution order by the browsers. In my view, I have always assu ...

cssproperties

Does Material-UI MenuItem pass arguments to the onClick handler function?

I am currently working with a search.js file and a search-date.js file. Within the search.js file, there is a container called SearchDate which I render. However, I'm puzzled by the behavior of the MenuItem component when it is clicked. The function ...

javascriptreactjsmaterial-ui

Modifications to CSS Styles in NextJS Project Take Effect Following Deployment on Vercel

I've been troubleshooting a NextJS Project that includes an component. While everything works smoothly on my local environment, the behavior changes when deployed on Vercel Rendering. The iFrame no longer responds to changes in viewport width, ignori ...

reactjsnext.jsvercel

What is the best way to find a specific class within a CSS file using Visual Studio Code?

Currently, I am working with a bootstrap template on my webpage. I am interested in personalizing specific sections of the design, but unfortunately, I am having trouble identifying the relevant CSS rules within the extensive .css file. My research online ...

htmlcssvisual-studio

The navigation and title refuse to align in the center

Learning coding from scratch is a challenge, especially when tasked with creating a website for school. Right now, I'm gradually getting the hang of it, but I am struggling to center my navigation and title. Everything looks fine on my 13-inch laptop, ...

htmlcss

What is the process for submitting information to my Next.js API endpoint?

As part of my learning journey with Next.js, I am currently developing a test e-commerce website. To enhance the functionality, I am integrating a checkout system using Stripe. Initially, I was able to successfully implement the checkout feature with stati ...

reactjsapinext.jsstripe-payments

Stop the span within the paragraph from breaking onto a new line

I have a situation where I need quote symbols to be placed inside span elements that are children of a p element. Each quote symbol requires slightly different CSS styles, and they must be included in the HTML rather than in the CSS due to backend restrict ...

htmlcssword-wrap

Hovering over elements with the FireFox CSS transition 'transition-all' can sometimes lead to flickering and unexpected behavior

Can someone help me understand why I am experiencing a flickering effect on an element when using transition: all 0.5s ease-out; in FireFox? It's difficult to describe, but you can see it happening in this live example here: (take a look at the logo ...

cssfirefoxtransition

Discovering the wonders of React and Javascript through the powerful Map function

I've exhausted all my knowledge of map functions and syntax, but I keep encountering the error TypeError: Cannot read property 'action' of undefined. This issue seems to stem from this line: constructor(data=[]). Typically, I am only familia ...

javascriptreactjsgraphql-jsmap-function

Overcoming Duplicate Messages and Enhancing Performance in Chat Functionality with useOptimistic Method

I'm currently implementing a chat functionality in my Next.js application with Firebase Firestore, and I have encountered two main issues: // UpdatedChatWrapper.tsx const UpdatedChatWrapper = ({ user, allMessages, sendMessageAction }: Props) => { ...

reactjsfirebasegoogle-cloud-firestorenext.js

Using jQuery to Fade Out a DIV from multiple dropdown menus

Is there a way to fadeout the ".checkbox10" DIV only if ALL THREE of these dropdowns are reverted back to the original ("None") selection? Any help would be appreciated. Thank you. *I have successfully implemented thisDIV fadeIn() using "change" whenever ...

jqueryhtmlcssfadeout

How to Create Smooth Transitions for Text Arrays using jQuery's Fade In and Fade Out Features

I need to loop through an array of text and apply jQuery's fadeIn and fadeOut functions to each element. var greetings = ["hi, I'm", "bonjour, je m'appelle", "hallo, ich heiße"] The HTML structure I want is as follows: <h2><span ...

javascriptjqueryhtmlcssfadein

Incorporating Sass into an HTML document

Recently, I discovered Sass and went through its documentation. I successfully installed the package on my Ubuntu system alongside Ruby and Haml. Now I'm eager to learn how to use it with Wordpress or a basic HTML file. Being new to this, I'm see ...

htmlcsssass

Fix for fixed scrolling in the navigation bar

Having a website that receives traffic from different countries, including Portugal and other non-English speaking places, I decided to add a translation option. However, I encountered an issue with Google's translate feature which displays a banner a ...

javascriptjqueryhtmlcss

Incorporate create-react-app with Express

Issue - I am encountering a problem where I do not receive any response from Postman when trying to access localhost:9000. Instead of getting the expected user JSON data back, I am seeing the following output: <body> <noscript>You need to ...

javascriptnode.jsreactjsexpress

Encountering an error when using setState with React.createElement: invalid type provided

https://i.sstatic.net/YHssU.png Anticipated Outcome Upon clicking the login button without inputting an email or password, the user is expected to view the Notification component. Actual Outcome Upon clicking the login button, the setState function is ...

javascriptreactjssetstate

Steps to create a horizontal animation using CSS3

I have 6 different CSS3 animations that I want to split between going right and left. Can these animations be applied separately or do they all have to be the same direction? Is it also possible to adjust the speed of each animation individually? Here is ...

htmlcss