在materialUI中放大InputBase的占位符lineHeight和fontSize

Question

我是 material UI 的新手，我正在将它用于我的网站

我想要 inputbase in material ui 的占位符增加它们的 lineHeight 和 fontSize 但我不'知道访问占位符API来自定义它，请帮帮我

这是我当前的屏幕

这是我所期望的

这是我的代码

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>
        </>
    );
}

Answer 1

您需要通过 input 规则名称覆盖 .MuiInputBase-input CSS。在下面的示例中，我利用了 classes 对象属性，如 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
  }}
/>

代码沙盒：https://codesandbox.io/s/restless-dawn-b5xvv?file=/src/App.js

InputBase CSS 规则名称：https://material-ui.com/api/input-base/#css

在materialUI中放大InputBase的占位符lineHeight和fontSize

Enlarge placeholder lineHeight and fontSize of InputBase in material UI

javascript

frontend

placeholder

reactjs

material-ui