如何解决在材质用户界面中放大InputBase的占位符lineHeight和fontSize
我是实质性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>
</>
);
}
解决方法
您需要通过.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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。