在Material -UI InputBase组件中显示下划线

在Material-UI中，InputBase组件用于创建可自定义样式的输入框。要在InputBase组件中显示下划线，可以通过设置CSS样式来实现。

首先，需要导入InputBase组件和相关的样式：

import InputBase from '@material-ui/core/InputBase';
import { makeStyles } from '@material-ui/core/styles';

然后，可以使用makeStyles函数创建自定义的样式：

const useStyles = makeStyles((theme) => ({
  root: {
    borderBottom: '1px solid #ccc',
    padding: '5px 0',
  },
}));

在组件中使用InputBase，并应用自定义样式：

const classes = useStyles();

return (
  <InputBase
    className={classes.root}
    // 其他属性
  />
);

在上述代码中，通过设置borderBottom属性为1px solid #ccc来显示下划线效果。padding属性用于设置下划线与输入内容之间的间距。

关于Material-UI InputBase组件的更多信息和使用方法，可以参考腾讯云的相关产品文档：InputBase组件介绍。

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云