Update the CSS for InputLabel

I have a drop-down list that I want to customize. The issue is illustrated below:

https://i.sstatic.net/hzVtl.png

I'm looking to center the text "choose format" within the field and adjust the font size.

    return (
      <FormControl sx={{ m: 1, minWidth: 150 }}  size="small">
        <InputLabel>Choose format</InputLabel>
        <Select
          value={age}
          label="Choose format"
          onChange={handleChange}
          sx={{
            "& .MuiSelect-select": {
              paddingTop: 0.1,
              paddingBottom: 0.4,
              
          },
     }}
        >

        </Select>
      </FormControl>

  );
javascriptcssreactjsmaterial-ui

Answer №1

To position the label inside the box, I recommend adjusting the line height and text size.

Styling with CSS:

label.MuiFormLabel-root {
  font-size: 14px;
  line-height: 16px;
}

You can utilize the line-height property to control the vertical alignment within the box. Feel free to modify both values as per your preference.

Check out the Demo

Answer №2

Font Size

To adjust the font size for the placeholder, you can add the following code to your styles.css:

.MuiFormLabel-root {
  font-size: 25px;
}

This will allow you to specifically change the font size of the placeholder.

Alignment

If you want to center align the placeholder text, you can simply adjust the font size in the component like this:

export default function App() {
  const [age, setAge] = React.useState("");

  return (
    <FormControl sx={{ m: 1, minWidth: 150 }} size="small">
      <InputLabel>Choose format</InputLabel>
      <Select
        value={age}
        label="Choose format"
        sx={{
          "& .MuiSelect-select": {
            fontSize: 25 // This matches the font size in styles.css
          }
        }}
      >
        <MenuItem value={10}>.txt</MenuItem>
        <MenuItem value={20}>.docx</MenuItem>
      </Select>
    </FormControl>
  );
}

If you prefer not to modify the style.css file or if you want to use styled components, you can directly include the font size adjustment in your existing sx within the FromControl component:

<FormControl sx={{ m: 1, minWidth: 150, ".MuiFormLabel-root": { fontSize: 25}  }} size="small">

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

The React Router links require a refresh for the updated URL to take effect

As a newcomer to React, I am currently working on a project involving routing with links in the navbar. Unfortunately, I have encountered an issue with the navigation setup. Below is the code snippet for my navbar: import React, { Component, usestate } fr ...

reactjsreact-router-dom

Loop through each object in an array and verify if the value matches a specific criteria in Javascript

Explore the common issues related to object iteration and queries outlined below. Presented here is a list of objects (used for managing a connection form): const connectionData = { mail: { value: false, isRequired: true }, password: { v ...

javascriptarraysobjectmethodsiteration

What is the optimal platform for sending OTP via SMS in Nodejs? I experimented with twilio, but my account kept getting suspended because of my Geo location

Before, I used Twilio for another project without any issues. However, after creating 2 new accounts with my business email and adding $20 to send SMS, my account was immediately suspended for verification. Now, when I try to log in, I am only seeing the f ...

node.jsreactjstwiliosmsforgot-password

What could be the reason for the issue `injection "store" not found` showing up when attempting to call `this.store.commit()`?

I am currently working on storing values with VueX, specifically using Vuex 4.0 instead of the older version 3.0. While attempting to commit a value, I encountered an issue as follows: ... this.$store.commit("changerusername", u) ... To addres ...

javascriptvue.jsvuex

Passing an ID in Next.js without showing it in the URL

I am looking to transfer the product id from the category page to the product page without showing it in the URL Category.js <h2> <Link href={{ pathname: `/product/car/${title}`, query: { id: Item.id, }, }} as={`/p ...

javascriptreactjsnext.js

Troubleshooting: Issue with Button Layout in Ionic's ItemSliding Component

How can I create a list item that allows swiping to reveal an archive button? The requirement is for the icon to appear to the left of the text. I'm referring to the documentation on Button Layout: https://ionicframework.com/docs/api/components/item ...

cssangulartypescriptionic2ionic3

Spring's $.getJSON failing to trigger callback functions

After conducting extensive research, I have come across many similar issues but nothing that has provided a solution to my problem. I am facing an issue where my getJSON call is successfully calling my Spring controller and receiving JSON data in response ...

javascriptajaxjsonspring

Stop any accidental double clicks on the <input type="submit" /> to avoid duplicate entries

Is it possible to prevent a user from clicking twice on an input tag button with type submit? I attempted using ondblclick="javascript:void(0)", but it did not work. My code is within an Html.BeginForm, not a form element tag. Thank you in advance for al ...

javascriptc#jqueryhtmlasp.net-mvc

Using Angular 4 Component to Invoke JavaScript/jQuery Code From an External File

I have written a jQuery code that is executed at ngAfterViewInit(). //myComponent.ts ngAfterViewInit() { $(function () { $('#myElement').click(function (e) { //the code works fine here }); } However, I want t ...

javascriptjqueryangulartypescript

What is the best way to leverage multiple random YouTube v3 API keys simultaneously?

I have the following code snippet and I am looking to randomly select an API key from a list of keys: function search() { // Clear Results $('#results').html(''); $('#buttons').html(''); // Get Form Input ...

javascriptjsonapiyoutube-apiyoutube-javascript-api

Create an array of objects in JavaScript using JSON data

I have fetched a collection of dictionaries from my API: The data can be retrieved in JSON format like this: [{"2020-03-11 14:00:00":10.765736766809729} ,{"2020-03-11 15:00:00":10.788090128755387}, {"2020-03-11 16:00:00":10.70594897472582}, {"2020-03-11 1 ...

javascriptjsonreactjsvictory-charts

Understanding the mechanism of callback function in NodeJS within the context of routes and controllers

Trying to grasp the concept of callbacks and puzzled by the recurring issue TypeError: callback is not a function Here's my router setup: // getPriceRouter.js router.post('/getPrice', function(req, res) { priceController.getPrice(req, ...

javascriptnode.js

CodeIgniter functionality for generating auto-incrementing IDs that are accessible in both the view and within JavaScript's Window.Print() method

While working on creating an invoice, I encountered a few issues. First, I want the Invoice No: to be displayed in my view (receipt.php) as 0001 and use it as the primary key in my tbl_payment table. However, I'm unsure how to have an auto-incremented ...

javascriptphpcsscodeigniter

Is it possible to retrieve HTML content using YQL?

Imagine the scenario where you need to retrieve information from a web page structured like this: <table> <tr> <td><a href="Link 1">Column 1 Text</a></td> <td>Column 2 Text</td> <td>Colum ...

javascriptjsonyahooyql

Troubulation with AngularJS: Why aren't my directives loading?

After working on my webpage Danieboy.github.io for some time, I took a 2-month break and returned to optimize it with the assistance of Dareboost. Making small changes like optimizing images and switching raw.github.com to rawgit.com, I thought everything ...

javascriptangularjsweb

How to align Vimeo embed to the left side

Is there a way to align a Vimeo iFrame to the left instead of it automatically centering itself? I want more control over its alignment within my flexbox container. I've created a Flexbox container named .example-div with two internal flex containers ...

htmlcssalignmentvimeovimeo-player

Show information - press the button on the current PHP page

After successfully reading files via PHP from a directory and dynamically creating a drop-down menu to view the file content, I have a query. Is there a way to display the text files' content on the same page without calling another PHP page? I know t ...

javascriptphphtmlajax

Can the console logs be disabled in "Fast Refresh" in NextJS?

When I'm running multiple tests, my browser's console gets cluttered with messages every time a file is saved. Is there a way to disable this feature? For example: [Fast Refresh] completed in 93ms hot-dev-client.js?1600:159 [Fast Refresh] rebuil ...

javascriptreactjsnext.jsfast-refresh

Making adjustments to text in HTML without altering the CSS or styling is proving to be challenging

When attempting to modify a h1 tag without changing the CSS, I encountered an issue. Below is the string with and without the JavaScript: String without JavaScript: https://i.sstatic.net/JWOmq.png String with JavaScript: https://i.sstatic.net/RNMur.png ...

javascripthtmldom

Angular: Keeping all FormControls in sync with model updates

I am dealing with a collection of FormControls that were created using FormBuilder: this.someForm = this.fb.group({ name: '', size: '', price: '', }); Is there an alternative method to update them based on ...

javascriptangularangular-forms