Update the CSS for InputLabel

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

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

Repositioning with Flexbox: shifting the middle element to a new line

I have a flex item that contains three divs. ┌────────────────────────────────────────┐ | WRAPPER | | ┌─────────┬─ ...

cssflexbox

Is there a way to access and read the console log of a specific website using Python code? I am looking to extract messages such as "ok" and "connected

Seeking guidance on how to interpret console log output for a specific website while automating with Python. Struggling to extract live console data through Selenium, as there's no built-in function for reading logs in real-time. Although I can acces ...

javascriptpythonpython-2.7apiselenium

AngularJS directives and controller scope

I'm looking to create a custom directive in AngularJS that generates a div element as a title and a ul list below it. The title should be customizable through an attribute, while the list content is controlled by a designated controller. Check out t ...

javascriptangularjsangularjs-directive

Generating an instance of an enum using a string in Typescript

Having trouble accessing the enum members of a numeric enum in TypeScript using window[name]. The result is an undefined object. export enum MyEnum { MemberOne = 0, MemberTwo = 1 } export class ObjectUtils { public static GetEnumMembers(name ...

javascripttypescriptenums

The custom validator in Material2 Datepicker successfully returns a date object instead of a string

Im currently working on developing a unique custom validator for the datepicker feature within a reactive form group. Within my code file, specifically the .ts file: form: FormGroup; constructor( private fb: FormBuilder, ...

javascriptangulartypescriptdatepickerangular-material2

Retrieving Angular URL Parameters Containing Slashes

I'm currently in the process of developing a single page angular application. This app retrieves a token from the URL and then sends it to an API. At the moment, my URL structure is as follows: www.example.com/?token=3d2b9bc55a85b641ce867edaac8a9791 ...

javascriptangularjsurlroutes

How can you position an element at the bottom of a div using CSS?

Could you please assist me in aligning an element to the bottom of a div using CSS? Below is a screenshot of my webpage for reference: http://prntscr.com/5ivlm8 (I have indicated with an arrow where I want the element to be) Here is the code snippet of m ...

htmlcss

Issue: Stylesheet not being loaded on Index.html through Gulp

Issue The .css file is not being loaded by the index.html despite setting up a gulp.js file. It seems like the folder directory might be causing the problem. However, the .scss files in the /src/scss folder are compiling correctly into CSS within the /bui ...

htmlcssnode.jssassgulp

Guide on how to initialize a variable in Express.js within a conditional statement in Node.js

Trying to create a variable based on a conditional statement, but even with simple code I am unable to retrieve the new variable. Here is my code: exports.productPatch = (req, res, next) => { const id = req.params.productId; const image = req.body.p ...

javascriptnode.jsexpress

Restrict access to table records by specifying an array of row identifiers

Hi everyone, I've encountered a small issue. Just to provide some background, I have a table with checkboxes. Each row in the table has an associated ID, and when selected, I receive an array like this: const mySelectedRoles = [1997, 1998, 1999] Once ...

javascriptarraysreactjs

Altering the DOM directly within the componentDidMount() lifecycle method without needing to use

In ReactJS, I am facing an issue while trying to manipulate the DOM in the componentDidMount() method. The problem lies in the fact that the DOM is not fully rendered at this point, requiring me to use a setTimeout function, which I find undesirable. Upon ...

javascriptcssreactjs

Leveraging promises in conjunction with mongoose operations

I'm new to using promises in conjunction with mongoose query functions such as find() and findById(). While everything seems to be functioning correctly, I am unsure if the way I am chaining then is the proper approach. The goal of utilizing promises ...

javascriptnode.jsexpressmongoose

CSS Styling Dropdown Menu for Internet Explorer 5 and Internet Explorer 11

I am encountering an issue with a select box that is coded as follows: <html:select property="list_data" size="12" style="width: 350px;" ondblclick="JavaScript:doOK()"> <html:optionsCollection property="list_data" label="codeAndNameLabel" val ...

htmlcssinternet-explorer-11

Using JavaScript to assign multiple classes to a function at separate intervals

I'm trying to add two classes to a JavaScript function, but I'm encountering some issues. When I try to add both classes in the same line, only one of them works. However, if I add each class on separate lines within the function, only the second ...

javascriptjquery

Preventing jQuery slideToggle functionality from toggling multiple elements at once

I am currently working on a project where I have a series of images with captions that appear underneath each one. To show or hide the caption for each image, I am using slideToggle when the image is clicked. $('.imageholder').click(function() ...

javascriptjquerycssslidetoggle

What sets apart calling an async function from within another async function? Are there any distinctions between the two methods?

Consider a scenario where I have a generic function designed to perform an upsert operation in a realmjs database: export const doAddLocalObject = async <T>( name: string, data: T ) => { // The client must provide the id if (!data._id) thr ...

javascriptreactjstypescript

Combining data from multiple API calls in a for loop with AngularJS

I'm working with an API that contains pages from 1 to 10 and my goal is to cycle through these page numbers to make the necessary API calls. app.factory('companies', ['$http', function($http) { var i; for (i = 1; i < 11 ...

javascriptangularjsjsonapi

Expo does not support playing audio files from assets

import AlphService from './AlphService'; export default class MyClass extends React.Component { alphService; constructor(props) { super(props); alphService = new AlphService(); this.state = alphService.getState(); } componentWillMount( ...

reactjsreact-nativeexpo

Features of ES2015's [[class]] attribute

I've been developing a basic clone function var shallowCopy = function (value) { // In ES2017, we could also use // return Object.create(Object.getPrototypeOf(value), Object.getOwnPropertyDescriptors(value)); let propDescriptors = {}; for (le ...

javascriptecmascript-6

Unexpected JSON response from jQuery AJAX call

Trying to make a request for a json file using AJAX (jQuery) from NBA.com Initially tried obtaining the json file but encountered a CORS error, so attempted using jsonp instead Resulted in receiving an object filled with functions and methods rather than ...

javascriptjqueryjsonajax