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

Tips for showcasing a Bootstrap alert

I'm attempting to integrate Bootstrap Alerts into my project, but I'm struggling to display them programmatically. Here is the HTML snippet: <div class="alert alert-success alert-dismissible fade show" role="alert" id="accepted-meal-al ...

When hovering over a hyperlink, an image appears but I want to adjust the image's position in relation to each link

I have a unique feature on my website where text hyperlinks reveal small thumbnail images when hovered over. This concept was inspired by an example I found on this page. I initially implemented the code from a post on Stack Overflow titled Display Image O ...

Using getServerSideProps in _app.tsx within the Next.js framework

Let me lay out the current scenario for you. I'm attempting to set a "language" cookie during the app initialization process in order to adjust the UI accordingly. For instance, if the language is set to "Arabic" (ar), I need to switch the layout to ...

Experiencing difficulties in displaying a React element that is being passed as a prop

One of my components looks like this: const Chip = (props) => { const ChipIcon = props.icon; let deleteButton = null; if (!props.readOnly) { deleteButton = <Delete style={styles.deleteButton} onTouchTap={props.onRemove} /& ...

Can we show the dropdown with the active button?

Can someone assist me in transforming my sidebar buttons into dropdowns when viewed on a responsive layout? I'm looking for something similar to the sidebar (on the left) featured on this website: If possible, I would like the dropdown to only displa ...

Issue with SMS_MFA not being enabled due to missing delivery configuration in React and AWS Amplify

My React web application, powered by aws-amplify, interacts with AWS Cognito User Pool for user authentication. Users can choose to activate SMS MFA from the app settings. While attempting to enable SMS MFA using the aws amplify npm package, I encountere ...

Animated Gradient Header with CSS

I've been attempting to add an animated gradient to my header class, but so far I haven't been successful. I want the gradient to apply only to the header, not the body. Here's the link I'm using for reference: Can anyone offer some i ...

Flexbox allows you to easily manage the layout of your website

I am currently working on a CSS project and have encountered an issue. Whenever I apply the "display: flex" property to the .student element, the border around it mysteriously doubles. The reason for wanting to use the flex property is to align the text ve ...

Is there a workaround for retrieving a value when using .css('top') in IE and Safari, which defaults to 'auto' if no explicit top value is set?

My [element] is positioned absolutely with a left property set to -9999px in the CSS. The top property has not been set intentionally to keep the element in the DOM but out of the document flow. Upon calling [element].css('top') in jQuery, Firef ...

Having difficulties fetching data from Express server to React

My current project involves fetching data from an Express server to a React application using the Fetch API. The Express server interacts with a PostgreSQL database to retrieve relevant data that should be sent to the React frontend. The code snippets bel ...

In what way can you establish a boundary for a border?

My goal is to create a 10x10 grid with randomly placed black boxes, but I am facing an issue in my game setup: Currently, the 5 black boxes are generated randomly in a row, sometimes exceeding the border and breaking the continuity. I would like to establ ...

React's back button is experiencing functionality issues

I'm having an issue with my quiz page where the previous button is not functioning properly. The user should be able to change their answer before submitting, but after 5-6 clicks on the previous button, they are redirected to the next page without co ...

Unable to host Express and React application on port 80

I have a React application compiled with Express serving as a static React site, and I want to host them on port 80. The challenge is that my VPS runs Ubuntu with Plesk Onyx supporting multiple applications as subdomains on vhosts using port 80: server.l ...

CSS - Update BackgroundColor Depending on Child Element Color

Is there an official CSS way to change the background color based on the child element in HEX? For example: render() { return ( ... <span> <h3 style={{ color: item.color }}>Item Color</h3> </span> ...

Scrolling Horizontally with Bootstrap Cards

I'm trying to implement horizontally scrolling cards using Bootstrap V.5, like this: <div class="container-fluid py-2"> <div class="d-flex flex-row flex-nowrap" style="overflow: auto;"> <div cl ...

Safari causing rotated element to shift by 1px due to CSS3 Transition

Encountering a rendering issue in Safari with 180deg rotated elements. Two examples highlight the problem (tested on Safari 9.1): Odd width problem. The bottom element shifts to the right initially, and further on transition. Even width problem. It appea ...

"What is causing the issue of 'undefined' results for req.query.patient in

I tried following a tutorial step by step, but my code is not producing the expected output. Instead, it is giving me undefined results. I'm struggling to identify where the mistake lies and why this problem is occurring? app.get("/appointment&qu ...

Step-by-step tutorial for making a mesmerizing fade out grunge background

How can I achieve a fading grid background effect? I have experimented with using a conic-gradient for the background, but I am unsure how to make it fade out. background: conic-gradient(from 90deg at 1px 1px,#0000 90deg,grey 0) 0 0/50px 50px; ...

Tips for efficiently incorporating fetches that mimic a subscription feature using React's useEffect function

I have a question about the best way to handle network fetch behavior in React when a single changing property is involved. To provide context, I am working on a multi-page form that automatically saves draft inputs as the user navigates between pages. I ...

Challenges faced while deploying a TypeScript and React application using Express on Heroku

I encountered some errors when attempting to host my application: 2018-07-03T23:32:25.175363+00:00 heroku[web.1]: Starting process with command `npm start` 2018-07-03T23:32:28.093779+00:00 heroku[web.1]: State changed from starting to crashed 2018-07-03T2 ...