Question

我是实质性UI的新手，并且正在将其用于我的网站

我希望材料ui中的 inputbase 的占位符增加它们的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

您需要通过.MuiInputBase-input规则名称覆盖input CSS。在下面的示例中，我利用了documentation中所述的classes对象属性。

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规则名称：https://material-ui.com/api/input-base/#css

在材质用户界面中放大InputBase的占位符lineHeight和fontSize

1 个答案: