Question

130

ReactJS: How to change placeholder font size of Material Ui Autocomplete?

rated 0 times [ 135] [ 5] / answers: 1 / hits: 13836 / 4 Years ago, sun, october 18, 2020, 12:00:00

I want to change the placeholder fontsize of Material Ui Autocomplet. Is there any way?

             <Autocomplete

                  multiple

                  id="tags-outlined"

                  options={top100Films}

                  getOptionLabel={(option) => option.title}

                  defaultValue={[top100Films[13]]}

                  filterSelectedOptions

                  size="small"



                  renderInput={(params) => (

                    <TextField

                      {...params}

                     

                      variant="outlined"



                      placeholder="Enter Transshipment Ports"



                      

                    />

                  )}

                />

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

stacied

Add To Favorites

Follow

Total Points: 124

Total Questions: 84

Total Answers: 98

Location: Ivory Coast

Member since Sun, Mar 7, 2021

3 Years ago

stacied questions

1 Data Not updated when fetch query - React-Query?

Sat, Mar 27, 21, 00:00, 3 Years ago

1 How to disable autocomplete on react native paper TextInput? with autoComplete=off render autocomplete=noop on the web

Sat, May 23, 20, 00:00, 4 Years ago

1 How to import geolib in React Native to calculate the distance between two points?

Wed, May 1, 19, 00:00, 5 Years ago

1 Parse HTML String to Array

Fri, Dec 21, 18, 00:00, 6 Years ago

1 How to detect the last slide and first slide in slick?

Thu, Oct 25, 18, 00:00, 6 Years ago

View All

answered 4 Years ago irvinjovannix · Accepted Answer

In your example, you can target the input element of the component you render in renderInput which is TextField using makeStyles

const useStyles = makeStyles({

  customTextField: {

    "& input::placeholder": {

      fontSize: "20px"

    }

  }

})



<TextField

  classes={{ root: classes.customTextField }}

  {...params}

  variant="outlined"

  placeholder="Enter Transshipment Ports"

/>

Example below using forked MUI demo