What is the best way to center-align the label of a TextField in React Material-UI horizontally?

I'm trying to center-align the label in this TextField:

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";       
        
        export default function BasicTextField() {
          return (
              <TextField
                id="standard-basic"
                label="Standard"/>
          );
        }

Initially, I managed to right-align the label:

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";       

const StyledTextField = withStyles({
          root: {
            "& label": {
              transformOrigin: "top right",
                right: "0",
                left: "auto" 
            }
          }
        })(TextField);
        
        export default function BasicTextField() {
          return (
              <StyledTextField
                id="standard-basic"
                label="Standard"/>
          );
        }

Is there a way to horizontally center-align the label?

Answer №1

Give this a shot

main: {
        "& title": {
          size: "50%",
          align: "left",
          position: "top",
            "&.Mui-active": {
              position: "top"
            }
         }
      }

Answer №2

If you want to center your label, you can use either a Box component or a Grid component:

<Box display="flex" justifyContent="center">
    <StyledTextField id="standard-basic" label="Standard"/>
</Box>

Alternatively, you can also use the Grid component:

<Grid container
  direction="row"
  justify="center"
  alignItems="center"
>
  <StyledTextField id="standard-basic" label="Standard"/>
</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

Can you provide instructions on how to insert a hyperlink onto a background image?

Is it possible to add a hyperlink to this background image without causing it to disappear? Would creating a new class in the stylesheet be the way to go? (I encountered an issue where the image disappeared when trying to call the new class). body{ back ...

The Bootstrap navigation menu fails to extend the parent div when toggled

When I toggle the button to show the menu on small screens, the menu overflows the parent div with id=contents instead of pushing it down. How can this issue be fixed? Here is the code: <body> <nav id="header" class="navbar navbar-default"& ...

The React-native application initialized using npx create-react-app encountered an error and could not launch

Hello there, A couple of months back, I developed an app using create-react-app. However, when I tried to run it with npm start, I encountered the following error message: react-scripts start It seems like there's an issue with the project depende ...

Why isn't the CSS outline property functioning properly within the handlebars?

I am working on a login form within a Handlebars page and I am trying to figure out how to set the default outline property to none for that particular element. Does anyone know how to do this? Snippet of code from the Handlebars file <input type=" ...

What are the steps to modify the "text" displayed on a button in a kendo grid?

How can I change the default button text "add new record" on my kendo grid? I attempted to modify it using the following code, but it did not work: #turbinegrid .k-icon.k-add::after { content: "ADD"; } ...

Is using transform scale in CSS to scale SVG sprites a valid method of scaling?

I have been using an SVG sprite as a CSS background image in this manner: .icon-arrow-down-dims { background: url("../sprite/css-svg-sprite.svg") no-repeat; background-position: 16.666666666666668% 0; width: 32px; height: 32px; display: inline-b ...

Debugger for Visual Code unable to locate URL in Microsoft Office Add-in

I recently installed the Microsoft Office Add-in Debugger VS code extension, but I'm having trouble getting it to work despite following the instructions. Every time I try, an error message pops up: Upon inspecting my launch.json file, I found this U ...

Best Practices for Implementing Redux Prop Types in Typescript React Components to Eliminate TypeScript Warnings

Suppose you have a React component: interface Chat { someId: string; } export const Chat = (props: Chat) => {} and someId is defined in your mapStateToProps: function mapStateToProps(state: State) { return { someId: state.someId || '' ...

The ES6 method of binding click handlers with parameters in React

After reading numerous articles on the usage of () => {} syntax, binding in the constructor, and binding in the props, I have come to understand that binding this can be performance-intensive. Furthermore, automatic binding with arrow functions incurs a ...

Jumping Sticky Table Headers

Looking for a solution to prevent the table header from moving when scrolling through the data: tbody { overflow-y: scroll; } thead, tbody tr { display: table; width: 100%; table-layout: fixed; text-align: left; } thead, th { position: sti ...

The upper margin is ineffective

Apologies, I am new to CSS. Here is the HTML code I have: <div class="box-A" >Box A content goes here</div> <div class="box-B" >Box B content goes here</div> I attempted to apply the following CSS to it: .box-A{ background-c ...

Issue with content not wrapping inside the body tag (apart from using float or setting body and html to 100

Why on earth is the body/html or .main div not wrapping my .container div's when the browser width is between 767-960 px?! This is causing horizontal scrolling and I am completely baffled. This should definitely be working! The only code I have is: ...

Is it beneficial to separate React and WebAPI into two distinct projects?

After spending 4 years in Asp.Net MVC and JQuery, I am looking to take the next step and transition to .Net Core 2, WebAPI, and React. I have been following various how-tos and tutorials, but what puzzles me is why every tutorial suggests adding React dir ...

Expanding a Landy react app to smoothly transition to a different page with the Router model

I am seeking assistance in updating the Landy out of the box application from https://github.com/Adrinlol/landy-react-template In a standard React/Javascript model, I would typically write code like the following: <Route path='/thanks' exact ...

Having trouble getting the vertical menu animation to work with jQuery

Essentially, I am facing an issue with a <nav> element that is supposed to expand from left to right upon mouseover. However, sometimes when quickly moving the cursor over and then out of the element, it expands without animation, which should not be ...

Designing a versatile pop-up window with jQuery or JavaScript that functions seamlessly across all web browsers

I've encountered an issue with my code where it displays a popup message correctly in Chrome, but when testing it on Firefox and Edge, it creates a strange box at the end of the page instead. Here is the code snippet I'm referring to: var iframe ...

"Upon completing the npm install process, the error message 'getFirebase() is not a function' was displayed

I've been working on a small react app and making good progress, but I still feel like I have a lot to learn. Recently, I encountered a problem that has me stumped. Everything was fine in my code until I opened another app in Visual Studio and it wasn ...

Efficiently pass props down to custom fields in nested structures using React-hook-form

I am looking to create a custom Form component using react-hook-form that can effectively manage fields that may be nested or enclosed in other elements. My strategy involves traversing the component tree and recursively passing register and errors (receiv ...

Is there a problem with the toolbar navigation icon color not updating?

I am experiencing an issue with my Material toolbar where the navigation icon color is not changing properly. Although I have made changes in the Layout validation, the updated color is not reflected when I install the app on my phone. For reference, here ...

Mozilla Firefox's webpage controls adapt according to the type of authentication being used

On my .NET MVC web page, I have 3 radio buttons for selecting a value on a form. However, in a specific test environment with two authentication methods (user/password or certificate), the radio buttons mysteriously change to checkboxes when the page loads ...