在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组件介绍。
相关·内容
当使用material-ui TextField时，我希望TextField是裸体的(没有下划线)。我确实知道在material-ui中使用InputBase可以实现这一点，但我需要使用TextField API来实现这一点，但我在API指南中没有找到实现方法。
浏览 1提问于2019-09-13得票数 33
回答已采纳
如何在reactjs中重定向到另一个页面。这是我的代码。
import React from 'react';
import { fade, makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconBut
浏览 5提问于2019-08-13得票数 0
回答已采纳
1回答
我正试图找出为什么material InputBase是有效的，而本地HTML却不起作用。
input支柱已经在文档中定义了输入元素；不必是特定于物质ui的输入.。
工作实例：
import Select from "@material-ui/core/Select"
import InputBase from "@material-ui/core/InputBase"
import styled from "styled-components"
const Input = styled(InputBase)`
border: 1px so
浏览 2提问于2020-05-21得票数 1
我正在用Material-UI改进我的应用程序，目标是实现完全的可访问性。我正在使用WAVE chrome扩展来检查它。
当我使用InputBase检查Material-UI组件创建文本区域时，我发现这是在用样式中的aria-hidden: true和visibility: hidden创建第二个文本区域
这是我的Material-UI InputBase定制组件：
<InputBase
id="input-container"
name="input-container"
ful
浏览 4提问于2020-12-23得票数 1
我尝试将material-ui中的InputBase元素的文本区域居中。目前我还不确定这是不是一个bug。我尝试将文本区域居中的一个示例可以找到here。 我的代码如下所示： import {
InputBase,
makeStyles
} from "@material-ui/core";
export default function EditTitle() {
const useStyles = makeStyles(theme => ({
input: {
height: theme.typography.h1.fontSize
浏览 47提问于2019-10-07得票数 1
1回答
关于如何从Algolia中的一个输入字段创建一个基本的SearchBox元素。问题是，阿尔戈利亚最后看起来很丑
这就是材料-用户界面进来的地方。我以前使用过，它包含一个搜索元素，所以我的想法是在SearchBox组件中实例化SearchBox，但使用material的专有InputBase (而不是无聊的html input)。
我将粘贴到下面的代码，但是它拒绝使用InputBase (更确切地说，它是相关的道具)来创建自定义SearchBox元素。
--如果有人有像这样划分不同API的经验，或者认为你可能知道发生了什么，不要犹豫让我知道！！
import React from 're
浏览 1提问于2019-05-22得票数 4
回答已采纳
我在React中有一个类，它使用了一个输入字段，它是网站标题的一部分：
如果输入无效，那么我想显示一个快餐栏。我使用的是组件。
问题是我根据Material-UI将anchorOrigin定义为中心和顶部。然而，快餐栏占据了整个屏幕的宽度，而我希望它只占据屏幕的顶部中心位置。我的消息很短，例如"Value invalid“，但如果它更长，那么我应该能够使用换行符。我不确定Material-UI API中是否有一些设置可以改变这一点(我找不到一个)，或者我需要使用CSS。
这是我的代码：
import React, { Component } from 'react'
浏览 3提问于2018-11-22得票数 2
回答已采纳
1回答
我希望搜索图标出现在material-ui (react)中输入框的右侧。有没有需要添加的类？
以下是代码片段
import InputBase from '@material-ui/core/InputBase';
import SearchIcon from '@material-ui/icons/Search';
<div className={classes.search}>
<div className={classes.searchIcon}>
<Sea
浏览 1提问于2019-12-18得票数 0
我想使用InputBase组件来选择下拉列表。选择框显示正确，但当我单击该字段时，下拉选项不显示。我已经尝试过像input这样的其他inputComponent，它工作得很好。 我想要上面的标签在字段上，我知道我可以使用原生选择来实现这一点。但是，我想在这些组件之间共享相同的样式。 有人知道如何使用输入库来制作选择组件吗？ 提供的代码如下： import React from "react";
import "./styles.css";
import {
FormControl,
InputLabel,
InputBase,
MenuItem
浏览 44提问于2020-12-25得票数 1
回答已采纳
1回答
所以我有一个基本的react应用程序，它允许用户从Movie Database API中搜索和显示电影。 这就是问题所在:我想把我的自定义React函数SearchMovies()链接到一个材料ui组件，特别是材料Ui SearchAppBar。但是，我在将此函数添加到材料Ui SearchAppBar时遇到了问题。 首先，我的定制代码以SearchMovies()函数为特色。代码如下： import React, { useState } from "react";
import MovieCard from "./movieCard";
export d
浏览 25提问于2020-07-12得票数 1
2回答
尝试从物质UI输入基组件中提取用户输入文本
我肯定我做错了什么但我不知道是什么。
import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import IconButton from '@material-ui/core/IconButton'
import InputBase from '@material-ui/core/InputBase'
import Paper from '@material-ui/core/
浏览 2提问于2019-11-09得票数 3
回答已采纳
我正在使用组件来构建我的网站。我有一个标题组件，其中有一个搜索字段，它在引擎盖下面使用了mui 。当用户输入空输入时(也就是说，他们不输入任何内容，只需单击enter)，我希望显示一个mui ，它将警告用户没有输入有意义的输入。
我无法将这两个组件组合在一起。此外，由于搜索字段状态在用户没有输入任何内容时并没有真正改变，所以如果用户反复按Enter键，将不会出现snackbar。我使用this.forceUpdate();，但是有更优雅的方法来实现这样的逻辑吗？
这是我的密码：
对于搜索输入字段：
import React, { Component } from 'react'
浏览 0提问于2018-11-18得票数 0
回答已采纳
我正在尝试使用material-ui在react-js中创建动态表，你可以在沙箱链接中看到我的方法，我不确定这样做是否正确，或者是否存在更好的方法。
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import Tabl
浏览 1提问于2020-09-28得票数 0
我一直在使用material UI构建一个react web应用程序。我想使用InputBase接收文本，并在按“Enter”键时执行操作。我让onChange事件正常工作以更新输入，但是我似乎不知道如何执行onSubmit操作。 我尝试过将组件嵌套在表单中，但没有使其正常工作。它不仅不执行该操作，而且还刷新页面。我找到的唯一稍微有帮助的东西是this，但我对它一无所知。 inputBase应用程序接口似乎没有相应的功能。有什么建议吗？提前感谢！ 下面是我的代码： import { fade, makeStyles } from '@material-ui/core/styles&#
浏览 18提问于2020-05-01得票数 2
回答已采纳
1回答
如何使自定义搜索输入可重用？
、、、、
在我的应用程序中，最常用的元素之一是搜索输入，这使得搜索产品、主题、类别等成为可能。
我已经创建了搜索输入元素，参见下面。
如何使导航条搜索输入可重用，以便我可以在其他地方使用它？
import React from 'react'
import { Box, FormControl, InputBase } from '@mui/material'
import { styled } from '@mui/material/styles';
import { ContainedButton } from '../../ui-kit
浏览 2提问于2022-11-09得票数 2
1回答
反应钩与材料用户界面
、、、、
我试图使用来自material的代码，并得到以下错误：
Invalid hook call. Hooks can only be called inside of the body of a function component.
This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3.
浏览 2提问于2019-10-19得票数 0
回答已采纳
在浏览器中，我得到了错误：
未能在'C:\Users\Ja\Desktop\INFA\ProjektInzynierski\Projekt\Engineering-Project\client\src\components\layout\search‘中编译./src/components/layout/search/Searchbar.js模块:无法解析’./node_node/@material ui/core/IconButton‘
控制台错误：
map-contours.js:16未明错误:无法在Module../src/components/layout/searc
浏览 6提问于2019-10-06得票数 2
回答已采纳
我有个问题：
材质-UI:在一个FormControl中有多个InputBase组件。这是不支持的。它可能会导致无限的呈现循环。只使用一个InputBase。
我明白这意味着什么，但我真的需要两种形式的输入：
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom
浏览 4提问于2020-12-21得票数 1
我正在尝试建立我的第一个react站点--最终它将是一个产品数据库的参数化搜索，但现在我只想建立一个简单的搜索栏。我遇到了一个我不理解的错误。
我想我不知何故嵌套的样式不正确，但我不确定如何解决它。
我的代码：
import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; // add
import RaisedButton from 'material-ui/RaisedButton';
浏览 4提问于2020-03-20得票数 0
2回答
我正在尝试使用我写的这个组件：
import React from 'react';
import MenuItem from '@material-ui/core/MenuItem';
import ListItemText from '@material-ui/core/ListItemText';
const ITEMS = {
item1: { id: 1, name: '1', description: 'item1', protected: true },
item2: { id: 2,
浏览 6提问于2020-04-23得票数 0
回答已采纳
这两种代码用法有什么不同？FirstExample确实会在每次输入更改时都失去焦点(看起来每个更改都会导致重新呈现)。SecondExample不会失去焦点，并按预期工作。 示例 import React, { useState } from "react";
import "./styles.css";
import {
InputBase,
} from "@material-ui/core";
export default function App() {
const [state, setState] = useState({
浏览 14提问于2020-12-20得票数 0
我一直在写一个自定义的Material-UI Select下拉菜单，它的顶部有一个可选的文本字段，允许用户在Select中搜索/过滤条目。
我正在努力解决如何在单击文本字段时保持Select打开(呈现为InputBase)，并具有正常行为(选择常规Select时关闭MenuItem )。
CodeSandbox地址：
const searchField: TextField = props.searchable ? (
<InputBase
className={styles.searchBar}
onClick={(event: Event) =>
浏览 0提问于2019-11-07得票数 4
当我将BootstrapInput更改为以下内容时： <BootstrapInput
id="age-customized-input"
placeholder="Search Title"
/> 仅当选择输入字段时，才会显示占位符文本。 你知道如何让占位符始终可见吗？ 这是我在Material-UI中使用的示例。 import React from 'react';
import { makeStyles, withStyles } from '@material-ui/core/styles'
浏览 7提问于2019-06-19得票数 0
回答已采纳
我更新了从v4到v5的资料-ui版本，但我在使用react number格式库的组件中遇到了问题，显然这个问题与转发参考资料有关，但我无法解决，有人能帮我吗？
浏览器错误:支柱类型失败:向ForwardRef(InputBase)提供的支柱ForwardRef(InputBase)无效
谢谢你的帮助!
FormikTextNumber
import React from "react";
import { NumberFormatValues } from "react-number-format";
import { TextField, TextF
浏览 3提问于2022-02-08得票数 0
回答已采纳
这是我现在的SearchBar
我想要做的是，当我聚焦<InputBase>时，它将有助于触发对
<div className={classes.search} ref={refSearchBar}></div>，并使方框阴影更改如下：
我试着使用UseRef，但它似乎不起作用。
SearchBar.js
import React, { useRef } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Inp
浏览 5提问于2021-09-13得票数 2
回答已采纳
有没有办法在Material UI InputBase类型搜索组件中访问十字图标的样式？我想改变它的颜色、大小和厚度。
我使用的是React v16，Material-core v4.9.1和Material-icons v4.9.1
浏览 0提问于2020-12-11得票数 0
3回答
我正试着传递函数作为道具。我以前这样做过，但是现在用同样的逻辑给了我错误(this.props.functionName不是一个函数)。我有一个子组件(Navbar)和一个父组件(MainComponent)。我希望从Navbar向MainComponet发送一个输入值，并将其设置为父组件中的状态值。
父组件
import React ,{Component}from 'react'
import Navbar from '../Presentational/Navbar'
class Main extends Component{
const
浏览 4提问于2020-06-13得票数 0
我正在自定义NativeSelect (在Material UI v3中)。我想根据NativeSelect是否打开/展开来更改IconElement。在NativeSelect中，我似乎不能使用open、onOpen或onClose道具。
<NativeSelect
input={<InputBase
className={dropdownSelectStyle.rootInputBaseStyle}/>}
IconComponent={ExpandMore}
{...p
浏览 0提问于2019-11-02得票数 1
1回答
我是一个新的react &我正在使用material-ui，我想在React中设计一个自定义的自动完成，一旦从下拉列表中选择了数据，它就会显示为文本输入中的芯片。我正在使用material-ui autocomplete的onNewRequest属性，但我不确定如何在其中呈现芯片组件。有人能指导我怎么做吗？我想设计像gmail中的布局一样的收件人。我知道有npm包可用，但我需要纯粹从material-ui设计它，所以请使用正确的方法进行指导。
谢谢
浏览 6提问于2017-06-25得票数 0
回答已采纳
我有一个导航栏，我正在试着修复它。问题是，只有当您在搜索栏中键入路由时，路由器才能工作。当我单击选项卡时，它不会重新路由。只有home按钮选项卡可用，而其他选项卡不起作用 import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
imp
浏览 32提问于2020-11-09得票数 0
回答已采纳
我在React中有一个输入组件，其中输入是通过按Enter键提交的。我使用组件作为组件的基础。在onKeyDown偶数处理程序中，我通过将空字符串赋值给组件状态中的唯一字段来清除状态。不过，这不管用。我做错了什么？
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import InputBase from '@material-ui/core/InputBase';
import { withStyles } from '@mate
浏览 0提问于2018-11-15得票数 1
回答已采纳
我有一个自定义组件，它调用使用withStyles创建的另一个自定义组件。它看起来像这样 import {FormControl, InputBase, InputLabel, withStyles} from "@material-ui/core";
import React from "react";
export const CustomInput = withStyles((theme) => ({
...
}
}))(InputBase);
export const CustomTextField = (props) =&g
浏览 6提问于2021-10-26得票数 0
回答已采纳
1回答
物料UI抽屉关闭
、、
我有一个material UI抽屉，我可以打开它，但当我试图关闭它时，事件甚至都没有被调用。
import React from 'react';
import './App.css';
import { fade, makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Ic
浏览 8提问于2019-12-02得票数 0
我在应用程序中使用，但是在react代码中发现了一些缺失的逻辑。我完整的App.js源文件写在下面
import React from 'react';
import { fade,makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import Icon from '@material-ui/core/Ico
浏览 0提问于2020-03-06得票数 0
回答已采纳
我正在构建一个下一个js应用程序。不幸的是，我必须创建两个组件，因为设计是关键。在这里，在一个组件中，我必须添加表单和另一个组件，我必须添加提交按钮。一切都很好，但是我如何从另一个我放置了提交按钮的组件调用onSubmit事件。请帮帮我。 第一个组件(表单组件) import { Box, InputBase } from "@mui/material";
import { useForm } from "react-hook-form";
const OrderPlaced = () => {
const {
register
浏览 29提问于2021-11-15得票数 0
回答已采纳
我在Material-UI中为一个AppBar使用了这个示例，我只是将它从一个函数更改为一个类组件，然后我研究了如何使用withStyles和我做了完全相同的事情，但是不管我做了什么，也没有应用什么类型的更改。
"react": "^16.8.6",
"@material-ui/core": "^4.1.2",
"@material-ui/icons": "^4.2.1",
import React, {Component} from 'react';
import styleCl
浏览 3提问于2019-07-11得票数 0
回答已采纳
1回答
我是MUI/react的新手，我一直试图在我的输入基本表单旁边放置一个图标按钮，但我正在努力做到这一点，以便输入表单占用我的搜索div中的所有可用空间。相反，我的搜索图标包装器占据了大部分空间。我真的很困惑我做错了什么，有人能帮我解释一下吗？ 下面是我的代码： import * as React from "react";
import { styled } from "@mui/material/styles";
import Box from "@mui/material/Box";
import InputBase from "@
浏览 32提问于2021-10-19得票数 1
回答已采纳
1回答
我试图在一个组件中呈现一个重图表，但是遇到了一个小问题。这个小问题是一个flex标签，它似乎是我问题的根源。我遇到的问题是，我对css的了解还不够多，无法想出解决办法。 在我的导航风格中，我有一个display: flex。我的组件中也有一个display: flex。由于这种冲突，我的组件的图表不会响应页面的缩小，而是根据需要进行扩展。如果我从我的组件中删除display: flex，问题仍然存在，但是如果我在我的组件中维护display: flex，并从nav中删除它，图表会根据需要做出响应，但是nav不能正确呈现。有什么办法可以解决这个问题吗？ 另外，如果你需要更多信息，请让我知道！
浏览 27提问于2020-03-23得票数 0
我对material UI是个新手，我正在浏览一些链接，然后我就可以构建消息的内容了。 代码如下： class Data extends React.Component {
render() {
const { classes } = this.props;
return (
<Card>
<CardHeader
avatar={<Avatar aria-label="recipe">S</Avatar>}
title={
浏览 10提问于2020-03-31得票数 0
2回答
我有一个SearchBox组件。
SearchBox.tsx
import React from "react";
import IconButton from "@mui/material/IconButton";
import InputBase from "@mui/material/InputBase";
import Paper from "@mui/material/Paper";
import SearchIcon from "@mui/icons-material/Search";
functi
浏览 14提问于2022-06-26得票数 0
我知道在堆栈溢出上已经有这个问题的过时版本了，比如。
然而，当我试图谷歌和研究人们的解决方案，只是没有明确的答案。我能找到的任何答案都不符合我的要求。
我的堆栈：
节点JS
下一个JS
材料用户界面
从这样的问题的答案中我可以了解到，当涉及到下一个JS和Material时，存在某种程度的不兼容性。
就代码而言，这是我的Appbar组件。起初，我并没有导出我的useStyles对象，但最后我做了一次可怜的尝试，试图跟随。必须有一个修复程序，它不需要像我所拥有的每一个文件一样进行更改。
import React from 'react';
impor
浏览 0提问于2019-05-26得票数 6
回答已采纳
我在应用程序中使用reactjs，我需要添加注册页面。
我想要一个具有普通页眉和页脚页面的父布局。
当任何人单击“注册”按钮时，相同的页眉和页脚将被放置。
-------------------Header.js------------------
import React from 'react';
import { fade,makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
// import Grid fro
浏览 3提问于2020-03-16得票数 3
回答已采纳
1回答
如下所示，第一行是粘性导航，后面的行都是material中的InputBase组件。虽然我已经将导航条的背景色设置为白色，但input总是显示在导航条的上方。当我把InputBase变成我的定制div之后，这种奇怪的行为就消失了。
下面是一个现场演示：
浏览 0提问于2020-12-22得票数 0
回答已采纳
我正在尝试弄清楚如何使用Material UI表单输入元素。 我尝试将此输入用作全宽项目，它同时使用表单帮助器和和endAdornment。 我已经尝试了Input和InputBase选项，但这两个选项似乎都限制了这种组合。 此code sandbox使用Input组件显示宽度问题。目前，宽度容器被设置为fullWidth，根类将其定义为90% -但表单输入被压缩为较小的大小-我看不到强制执行该值的属性。 当我尝试使用InputBase时，我可以使用全宽，但不能在表单输入下面使用表单帮助器(它被推入同一行，并出现在InfoIcon之后)。
浏览 26提问于2020-07-23得票数 0
回答已采纳
当文本字段在react material ui的自动完成组件中获得焦点时，我想删除下划线样式并更改它的颜色。
我似乎找不到要覆盖的样式。
提前谢谢。
浏览 5提问于2017-05-02得票数 8
回答已采纳
当将状态设置在承诺捕获范围内时，我有一个错误。在下面的示例中，诺言的catch位于onClickSave()方法中。我相信我理解了错误，因为我误解了我所处的this上下文。在这里，我想使用this来处理类DialogUsersNewProps的内容。来自Java，this的行为有点不同，过去我已经在JavaScript中感到困惑了。我必须做些什么来从被拒绝的承诺的catch内部设定国家？
来自浏览器控制台的错误：
/home/myuser/Documents/myprog/administration2/node_modules/react-dom/cjs/react-dom.developm
浏览 0提问于2019-03-20得票数 2
回答已采纳
我是资料用户界面的新手，我正在我的网站上使用它。
我希望material中的inputbase的占位符增加它们的lineHeight和fontSize，但是我不知道如何访问占位符API来自定义它，请帮助我
这是我现在的屏幕
这正是我所期望的
这是我的密码
import React, { useContext } from 'react';
import { InputBase, Grid, makeStyles } from '@material-ui/core';
import { SearchBoxContext } from '
浏览 4提问于2020-08-29得票数 0
回答已采纳
我刚刚做了一个页面，并使用了链接换行按钮，但问题是当我这样做时，按钮文本有下划线
所以我的问题是，如何在react中制作一个按钮路由器，而不改变按钮中的任何东西，只需使用按钮添加操作，单击它，它就完成了，我也使用function来做了，但它显示了
奇怪的是，当我在沙箱上运行时，它没有那个错误
下面是我的本地代码
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
浏览 3提问于2019-12-23得票数 2
我试图避免使用Redux，并希望将搜索结果共享到标头之外的组件。我的头出现在每个页面上，数据在Lessons组件中。我希望在标题中搜索，并将结果传递到Lessons组件和Students组件。有什么线索吗？
下面是我的密码。
app.js
import "./App.css";
import Lessons from "./components/Lessons";
import LoadingHOC from "./components/LoadingHOC";
import React, { useEffect, useState } from
浏览 1提问于2021-08-10得票数 0
1回答
我只是想让我的导航栏中的条目对齐，如下所示(但将搜索框中的“Buy on App Store”关闭)：
我目前正在从这个材料-ui组件中获得‘灵感’：
出于某种原因，我把我所有的项目都打包到左边，而不是某种合理的排列方式：
如何使我的项目正确地对齐？这是我的组件可能继承的东西吗？实际上没有任何父组件，而是直接导入到App.js中。
我的代码：
import React from 'react';
import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@ma
浏览 2提问于2020-01-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
