CODEWITHSUNDEEP
javascriptreactjsmaterial-uifrontendplaceholder
Tam Do
Tam Do

Reputation: 321

Enlarge placeholder lineHeight and fontSize of InputBase in material UI

I am a newbie of material UI and I am using it for my website

I want the placeholder of the inputbase in material ui to increase their lineHeight and fontSize but I don't know to access to the placeholder API to customize it, please help me out

this is my current screen

this is what I expected

this is my code

import React, { useContext } from 'react';
import { InputBase, Grid, makeStyles } from '@material-ui/core';
import { SearchBoxContext } from '../../providers/SearchBoxContextProvider';

const useStyles = makeStyles((theme) => ({
    largeSearchBoxContainer: (props) => {
        return {
            [theme.breakpoints.up('sm')]: {
                textAlign: 'left',
                display: 'none',
            },
        };
    },
    hideSearchBox: {
        display: 'none',
    },
    InputBaseStyle: {
        '& $placeholder': {
            fontSize: '88px',
            lineHeight: '88px',
        },
    },
}));

export default function LargeSearchBox() {
    const classes = useStyles();
    var { openSearchBox } = useContext(SearchBoxContext);

    return (
        <>
            <Grid
                className={classes.largeSearchBoxContainer}
                container
                xs={12}
                sm={12}
                direction="row"
                justify="flex-start"
                alignItems="center"
            >
                <Grid item xs={12} sm={12} className={openSearchBox ? null : classes.hideSearchBox}>
                    <InputBase
                        placeholder="Search…"
                        className={classes.InputBaseStyle}
                        fullWidth
                        autoFocus
                        margin
                        inputProps={{ 'aria-label': 'search' }}
                    />
                </Grid>
            </Grid>
        </>
    );
}

Upvotes: 0

Views: 1224

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

You need to override the .MuiInputBase-input CSS via the input Rule name. In my example below, I took advantage of the classes object property as explained in the documentation.

const useStyles = makeStyles((theme) => ({
  InputBaseStyle: {
    "&::placeholder": {
      fontSize: "88px",
      lineHeight: "88px"
    },
    height: "120px"
  }
}));

<InputBase
  placeholder="Search…"
  // className={classes.InputBaseStyle} you can omit this
  fullWidth
  autoFocus
  margin
  inputProps={{ "aria-label": "search" }}
  classes={{
    input: classes.InputBaseStyle
  }}
/>

CodeSandBox: https://codesandbox.io/s/restless-dawn-b5xvv?file=/src/App.js

InputBase CSS Rule names: https://material-ui.com/api/input-base/#css

Upvotes: 1

Related Questions