How can I align text within an Input component to the right or center using MaterialUI?

Is there a way to align text within a Material UI input text element? The code snippet below doesn't seem to have any effect. I am currently working with version 1.x of Material UI.

import {Input} from 'material-ui';

//Alignment attempt that didn't work
<Input
   className="max-w-128 inline-block"
   style = {{textAlign: 'center'}}
   id="input-quantity"
   inputStyle={{ textAlign: 'center' }}
   //Also tried hintStyle as suggested in a bug
   hintStyle={{ width: '600px', textAlign: 'center' }}
   value={this.state.currentRecord.quantity}
   onChange={this.handleCurrentRecordTextChange('quantity')}
/>
cssreactjsmaterial-ui

Answer №1

To achieve the desired styling, simply utilize the following code snippet with styles overriding:

classes={{
 input: classes.inputCenter
}}

Ensure that the styles are defined as follows:

const styles = theme => ({
  inputCenter: {
    textAlign: "center",
    color: "red"
  }
});

For more information, please refer to the documentation available at: https://material-ui.com/api/input/#css-api

For a practical demonstration, feel free to explore this working example: https://codesandbox.io/s/n9nr9x8xo0

We hope that this explanation proves to be beneficial for your coding endeavors.

Answer №2

Remember to utilize the following code snippet when aligning text:

<Typography align="centre|right" />

In case you have a particular font style already defined, incorporate the above solution with withStyle HOC for customization.

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

Looking for tips on resolving issues with the bootstrap navigation bar?

Check out this code snippet: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport ...

javascripthtmlcssbootstrap-4

Tips for preventing extra whitespaces and line breaks from being added to the render tree in Blazor applications

Consider the code snippet below <div> @for (int i = 0; i < 10; i++) { <span class="@classes[i]">@i</span> } </div> The desired output is (with each character styled differently) 01234567890 Howev ...

htmlcssrazorblazor

How can I change the padding that is being inherited from "@ .MuiAlert-icon"?

Is there a method to override the padding inherited from "@ .MuiAlert-icon"? The Chrome inspector indicates that the current padding is set to 7px. .MuiAlert-icon { display: flex; opacity: 0.9; padding: 7px 0; font-size: 22px; ...

javascriptcssmaterial-ui

Arranging Divs with Right Float Alignment

I am running into issues trying to align and float certain divs properly. Currently, I have two divs with images that are displaying correctly, and now I need to add two more divs with images that behave in the same way. Even though I attempted to use th ...

htmlcsscode-formatting

Is there a way to stop Bootstrap from automatically bolding the font?

When testing this simple example without the bootstrap link, everything seems to be working correctly: Hovering over any word changes its color to red, and when hovering away it returns to black. But as soon as the bootstrap link is included, the text bec ...

javascriptjqueryhtmlcsstwitter-bootstrap

Conceal a single column on mobile devices using Bootstrap 4

Take a look at this code snippet: <div class="row"> <div class="col-lg-3"> <div class="ava-block"> </div> </div> <div class="col-lg-6 ...

htmlcssbootstrap-4

The most effective method for positioning a child element to the left and top using Flexbox grid

I am currently working on visualizing queues and processes within a system. Each process is associated with a specific queue from which it retrieves data. I aim to create a layout similar to the following: https://i.stack.imgur.com/BXyts.png However, I a ...

javascriptcssreactjsfrontend

Sounds play as you navigate and interact with buttons

One problem I'm encountering is that my application is designed to play an audio clip when a button is pressed. However, when navigating from a previous screen to this one using a button, all the audio files automatically start playing. Is there a way ...

reactjsmaterial-ui

How can you position an image and text side by side without specifying the width using a div?

Having some trouble aligning an image (which is contained in a div) and some text (also in a div) on the same line without setting a width for the text. Here's what I've tried so far. <div id="container"> <div id="image" style="flo ...

cssimagehtmlalignment

Tips for modifying the icon of a div with a click event using vanilla JavaScript

My goal is to create a functionality where clicking on a title will reveal content and change the icon next to the title. The concept is to have a plus sign initially, and upon clicking, the content becomes visible and the icon changes to a minus sign. C ...

javascripthtmlcsssass

Website Navigation: A guide to organizing columns and rows for optimal user experience

Just reaching out with a question regarding my coding process. Currently, I am in the midst of translating the website's navigation design into code. The attached image showcases the navigation layout consisting of 10 rows and 8 columns. Below is a s ...

htmlcsshtml-tablenavigation

What could be the reason why I am unable to choose my radio button? What error am I

The output can be found here... I am struggling to use a radio button and cannot seem to select it. Can someone please explain what issue I am facing? Any help would be greatly appreciated. const [value, setValue] = React.useState({ yes:"", no:"" ...

javascriptreactjsreact-hooksmaterial-ui

The HTML modal closing button is unresponsive and the contents inside are misaligned, causing functionality issues

I've searched through similar questions, but none of the suggested solutions seem to work for my issue. The problem I'm facing is that the closing button on my modal isn't functioning properly and the content inside it is not aligning corre ...

htmlcssmodal-dialog

What are the reasons behind the inability to import an image file in Next.js?

Having an issue with importing image file in Next.js I'm not sure why I can't import the image file... The image file is located at 'image/images.jpg' In Chrome browser, there are no error messages related to the image, However, in ...

javascriptreactjsimportnext.jsnext-images

Sending form data to the server using JavaScript: A step-by-step guide

Currently, I am dealing with the configuration of two servers. One server is running on React at address http://localhost:3000/contact, while the other is powered by Express at address http://localhost:5000/. My goal is to transmit form data as an object v ...

javascriptnode.jsreactjsexpressfetch-api

Tips for handling useEffect eslint dependency warning

I'm working with a stateObject in my useEffect that I want to change only when loading changes. However, I'm getting an eslint warning suggesting that I add the mobile object to the dependency array or remove it altogether. Should I ignore this ...

reactjsreact-hookseslintuse-effectreact-state

Is there a way to navigate to the next or previous image in a lightbox by using ev.target.nextElementSibling or ev.target.prevElementSibling?

I am new to the world of web development Currently, I'm facing an issue with my lightbox feature. I want to navigate between images by using ev.target.nextElementSibling and ev.target.prevElementSibling when clicking on the next/previous arrow.png ic ...

javascripthtmlcss

CSS3 animations with background-image for Firefox are an exciting way to enhance the

I am currently working on a keyframe animation project using CSS. The animation is running smoothly in Chrome with supported -webkit syntaxes. @-webkit-keyframes title_toggle { from { background-image:url(images/title.png); } 75%{ background-image:url(im ...

htmlcssfirefoxanimationkeyframe

What is the best way to rerun a script without having to manually refresh the entire webpage?

If you visit greenb.byethost12.com, you can check out the progress I've made so far. Currently, when you click on the correct answer, it triggers document.location.reload(index.php), causing the entire page to refresh. What I aim for is to have only ...

javascriptjqueryhtmlcss

Combining Laravel with React

Currently in the process of developing a substantial real estate listings platform with react and laravel. Can you suggest which approach would be better for this project and explain why? Option 1: Implement laravel react presets and store all react compo ...

javascriptphplaravelreactjslaravel-5