移除出现在TextField type=“time”material-ui React上的箭头和叉号
在TextField组件中，type为"time"的输入框会默认显示一个时间选择器的箭头图标和一个清除叉号图标。如果需要移除这些图标，可以通过覆盖CSS样式来实现。
首先，在React组件中导入所需的样式文件：
import { makeStyles } from '@material-ui/core/styles';然后，在组件中定义自定义样式：
const useStyles = makeStyles((theme) => ({
root: {
'& .MuiInputAdornment-root': {
display: 'none', // 隐藏所有输入框附加元素
},
'& input[type="time"]::-webkit-clear-button, & input[type="time"]::-webkit-inner-spin-button': {
display: 'none', // 隐藏时间输入框的清除按钮和箭头按钮
},
},
}));接下来，在组件函数中应用自定义样式：
const MyComponent = () => {
const classes = useStyles();
return (
<TextField
type="time"
className={classes.root}
// 其他TextField属性
/>
);
};以上代码中，我们定义了一个名为root的样式类，将其应用于TextField组件。root样式类中使用CSS选择器隐藏了所有的输入框附加元素，并使用特定的选择器隐藏了时间输入框的清除按钮和箭头按钮。
这样，TextField组件中的type为"time"的输入框将不再显示箭头和叉号图标。
对于腾讯云的相关产品和产品介绍链接地址，由于要求不提及特定品牌商，无法直接给出相关链接。但是，腾讯云作为一家知名的云计算服务提供商，提供了丰富的云计算解决方案和产品，包括云服务器、云数据库、人工智能等，可以通过访问腾讯云的官方网站获取详细信息。
相关·内容
我正在使用类型为time的material-ui react textField，我想移除在鼠标悬停和焦点时出现在右侧的箭头和叉号。 https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/pickers/DatePickers.js ?
浏览 20提问于2019-05-13得票数 5
回答已采纳
我正在尝试将表单填写的数据提交给道具。我知道REACT-REDUX，但不知道如何连接基于函数的组件
这是我的代码片段：
import React from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
// import { connect } from "react-redux";
export default function TextFields(pr
浏览 8提问于2019-10-21得票数 0
回答已采纳
材料-用户界面项目没有显示。我想在SelectField中展示产品类别，但它不起作用。当我单击selectfield时，它没有显示任何项，我的组件的所有代码都在下面给出。
import React, { Component } from 'react'
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import SelectField from 'material-ui/SelectFi
浏览 3提问于2017-04-24得票数 0
我正在使用来自material-ui的material-ui，我希望在TextField中显示当前日期，并允许用户选择另一个日期。如果可能的话？
value={date}在使用type="date"时不会出现在TextField中。我试着在网上寻求帮助，但什么也找不到。代码如下：
，，任何帮助都是非常感谢的！提前谢谢。
import React, { useState } from 'react';
import { TextField } from '@material-ui/core';
import { useForm } from &#
浏览 0提问于2020-04-16得票数 2
回答已采纳
App.js包含以下内容：
import React, { Component, Fragment } from "react";
import ReactDOM from "react-dom";
import TextField from '@material-ui/core/TextField';
class App extends Component {
render() {
return (
<TextField id="time" type="time" />
浏览 2提问于2019-10-17得票数 1
2回答
我是第一次学习资料-UI。我想定制材料UI的TextField。当文本字段未被选中时，我能够更改它的样式，当它聚焦时，我无法更改它的样式，我正在使用ThemeProvider将样式注入组件中。我试过这个代码
import React from "react";
import Checkbox from "@material-ui/core/Checkbox";
import TextField from "@material-ui/core/TextField";
import {
createMuiTheme,
makeStyles,
浏览 1提问于2020-04-24得票数 2
回答已采纳
陷入一种奇怪的情况，即输入和物质都不起作用-ui TextField在将其放入material中时也能工作。从TreeView中抽出同样的工作。共享下面的代码
CustomTreeView.js
import React, { useState } from "react";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import TreeView from "@material-ui/lab/TreeV
浏览 2提问于2019-11-27得票数 1
我正在尝试创建一个表单来收集输入以创建事件列表。我使用'value‘属性的方式记录在React文档中： https://reactjs.org/docs/forms.html ，收集用户输入onChange，但material-ui： https://material-ui.com/api/input/ 使用“value”将值设置到输入字段，而不是收集字段中的值。这导致了各种各样的错误，例如。无法输入输入，选取器不显示默认值，不接受值，也无法收集信息。我可以使用指针来指出我哪里错了。感谢您的关注:-) import React from 'react';
import
浏览 10提问于2019-04-15得票数 0
回答已采纳
我怎么了，你能告诉我我是怎么做的吗？ 我正在创建一个需要钩子来替换状态的网站。我在我的index.js上。错误出现在菜单中的div中的onClicks上。菜单来自material-UI 我的代码： import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
export default function SimpleMenu
浏览 1966提问于2020-01-09得票数 0
2回答
我已经成功地在我的React应用程序的TextField中增加了标签。我的问题是，当它在收缩时，它只是在它的右边重叠了一些线。
import React from "react";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
root: {
"&
浏览 5提问于2020-12-05得票数 0
我正在尝试使用formik验证自动完成多项选择。第一次它是在按钮点击上工作，但当我删除选定的值时，它不是验证。 import React from "react";
import ReactDOM from "react-dom";
import { Formik, Form } from "formik";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@materia
浏览 29提问于2021-09-12得票数 0
我正在尝试构造一个具有动态字段的表单(以及一个显示/隐藏它的开关)。我想使用两种react-hook-forms (因为它的伟大功能：(1)以我想要的方式自动填充数据结构，而不必手动完成；(2)“监视”输入的功能(即立即对用户操作做出反应，并将其反映在变量中)。我也想使用material-ui，因为我需要我的应用程序看起来非常现代。根据react-hook-forms的文档，它支持UI库，material-ui就是其中之一。 但我有个问题。对于某些类型的输入，比如material-ui的TextField，一切正常。我可以使用“watch”，它工作得很好。但对于其他一些输入，比如Switch
浏览 21提问于2019-12-27得票数 1
回答已采纳
1回答
下面是我为控制器使用的代码：
import React from 'react';
import { useFormContext, Controller } from 'react-hook-form';
import { TextField, Grid } from '@material-ui/core';
function FormInput({ name, label, required }) {
const { control } = useFormContext();
return (
<Grid item
浏览 7提问于2021-12-23得票数 0
回答已采纳
通过按一个按钮并将showModal切换到true，我将props发送到模态组件AddEventModal。在AddEventModal组件的构造函数中，我为open分配了一个新的状态。在那之后我应该准备好了。但出于某种原因，我在AddEventModal的AddEventModal状态仍然是false。这是代码：
import React, { Component } from 'react';
import Header from '../components/Header';
import Hour from '../components/Hour
浏览 0提问于2018-12-04得票数 0
回答已采纳
1回答
我正在经历一个麻烦，使我的反应形式与中心一致。
这是我的表格：
我正在使用reactjs资料用户界面。
<Grid item xs={12}>
<Grid item xs={12}>
<FormGroup noValidate autoComplete="on">
<TextField
label="SSN"
type="number"
浏览 4提问于2019-10-21得票数 0
回答已采纳
我正在构建一个React应用程序，我想使用material-ui框架。
我构建了一个带有文本字段和按钮的组件，但我无法单击文本字段，也无法单击按钮。
以下是组件代码：
import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
class Descarcare extends React.Component {
const
浏览 4提问于2021-09-15得票数 0
我正在尝试测试一个组件。测试可以在没有样式的情况下工作，但是现在我用Material-UI设置了样式，测试就不再有效了。如果使用Material-UI设置样式，该组件似乎只会呈现为[object Object] (未定义)。 我有一个要导出的表单：export default withStyles(styles)(ShuttleForm); 但是我现在可以测试组件ShuttleForm，或者任何使用它的组件，因为我正在将它导出为withStyles。 如何测试带样式的material-ui组件？我看过material-ui文档，并使用了他们的createShallow，但这并没有起到什么作用
浏览 9提问于2019-10-11得票数 2
在获取输入值时，我总是被this.refs.refsName.value和this.refs.refsName.getValue()弄混。
下面是测试代码：
import React from 'react';
import TextField from 'material-ui/TextField';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import MuiThemeProvider from 'material-ui/styl
浏览 2提问于2016-08-16得票数 0
我在一个应用程序中使用了ReactJs，并且我需要添加针对所有字段的验证。 我想添加针对姓名，电话号码，电子邮件，密码和确认密码的验证。 当任何人在这些字段中输入一些无效数据时，验证消息应该与字段一起显示。 import React from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@materi
浏览 25提问于2020-03-30得票数 1
回答已采纳
@material ui/lab/Autocomplete它对我不起作用，只是不允许我选择和选择它总是有的占位符，即使是类型，
这里：
这是我的密码：
import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
export default function FreeSolo() {
return (
<di
浏览 3提问于2020-01-12得票数 3
每当我在字段中输入一个字符时，焦点就会消失。我该如何纠正它呢？
"use strict"
import React from "react";
import createReactClass from "create-react-class";
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import {Card, CardActions, CardHea
浏览 0提问于2018-01-19得票数 4
我正在使用redux-form创建身份验证表单。 import React from 'react';
import Button from '@material-ui/core/Button';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import Grid from '@material-ui/core/Grid';
import TextField from '../../c
浏览 27提问于2019-03-18得票数 0
回答已采纳
当我鼠标悬停在类型为'date‘的TextField上时，我需要显示光标指针。我在下面提供了沙盒链接。有人能帮我吗？谢谢。 沙盒链接：https://codesandbox.io/s/material-demo-forked-5jcoq?file=/demo.tsx 代码：- import React from 'react';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import TextField from '@material-
浏览 7提问于2021-02-01得票数 0
3回答
很难从我的反应组件中分派一个动作。这是我的第一个Redux应用程序。一切看起来都很好，但如果是的话，我就不会发布这个问题了。我正在使用Redux devTool来调试我的应用程序。如果我使用来自devTools的调度程序，那么我的还原器就会被触发，没有问题。但是，我无法从我的React组件中分派相同的操作。我在操作中添加了一个断点，以查看是否被触发。我肯定是，它还返回一个有效的操作(类型和有效载荷)。这是我的代码：
store.js
import {createStore, applyMiddleware, compose} from 'redux'
import {creat
浏览 5提问于2017-05-18得票数 4
6回答
我正在使用React Material UI (文档)中的responsive抽屉
我正在试着改变它，使抽屉的高度始终保持为100%。为此，我尝试更改根类的高度，当前设置为430。但是，当我将其设置为百分比时，它只会默认为可能的最小高度。
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from 'material-ui/styles';
浏览 4提问于2017-11-28得票数 7
3回答
使用Reactivewithreact-redux，我正在尝试获取以下登录表单：
import React from 'react'
import RaisedButton from 'material-ui/lib/raised-button';
import TextField from 'material-ui/lib/text-field';
const LoginButton = () => (
<form>
<div>
<TextField hint="E-mail&
浏览 6提问于2016-03-09得票数 3
回答已采纳
我有一个带有表单组件、SubmitButton组件和我的父级(App.js)组件的小应用程序。当用户单击submit按钮时，我希望获取表单组件上的3个字段的值，并将它们传递给我的App.js组件。我不知道如何使用onClick()或其他类似的方法触发事件，以便从表单中获取表单字段值，然后通过props将它们传递给App.js组件并对它们进行console.log()。谁能提供一些指导，因为我是非常新的反应？
App.js
import React from 'react';
import NavBar from './Components/NavBar'
imp
浏览 0提问于2019-06-18得票数 3
回答已采纳
2回答
? 我有下面的地图，正如你应该在地图上我有一个多边形和标记，这是多边形的主要点，下面我打印了多边形的主要点，即标记。 我为用户提供了删除多边形的点的可能性，正如您在下面的图像中通过单击X可以看到的那样，点被消除了。 问题是，当我单击X时，该点作为标记被消除，但它似乎仍然是多边形的固定点，它实际上不应该这样做，多边形应该根据消除的点改变其形状。 我不能理解我哪里错了。你能帮我个忙吗。 链接：codesandbox 索引： import React from "react";
import ReactDOM from "react-dom";
impor
浏览 43提问于2020-01-07得票数 3
回答已采纳
我想使用来自react-final-form ()的Material UI的TextField。
主要问题是“如何获得values 对象？”
我不能从TextField那里得到它。
结果是：
我已经试过了不同的例子，但都没有用。
我的代码：
import React from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Card from '@
浏览 2提问于2019-02-21得票数 6
回答已采纳
我试图用ReactJS建立一个基于属性值的动态搜索栏，但我得到了以下错误'Cannot read property 'handleChange‘of undefined’。我看不出我做错了什么，我只是想显示两个DatePicker。
下面是我的代码：
app.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import SearchBar from '../searchBar/searchBar';
export d
浏览 0提问于2018-01-26得票数 0
回答已采纳
我正在尝试为我的react应用程序设置登录功能。一旦用户登陆登录页面，它在底部有一个按钮，上面写着“注册”。当我单击该链接时，它会正确地更新URL，并在URL中显示"/register“，但Register组件没有呈现。在更传统的路由中，我会设置一个路由配置，指示所有路由的去向，但据我所知，react router 4正在远离这一点。通过阅读文档和一些示例，我认为简单地放入Route path="/register“component={Register}就足以告诉链接标签呈现哪个组件，但情况似乎并非如此。我正在使用"react-router"："^4.
浏览 4提问于2017-12-06得票数 0
1回答
当我尝试使用黑色主题时，它会将文本字段变成白色而不是灰色背景。我做错了什么吗？ 1.创建文本字段 2.将主题设置为暗 import React from "react";
import TextField from "@material-ui/core/TextField";
import { createMuiTheme } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";
const theme = c
浏览 19提问于2019-10-11得票数 3
回答已采纳
1回答
制表符组件中有三个选项卡A、B、C。在TextField中键入一个字符，这是选项卡C的形式。突然，选项卡切换为空，没有选择任何选项卡。
deps："material-ui": "^0.15.0-alpha.1", "react": "*", "react-dom": "^0.14.3", "react-tap-event-plugin": "^0.2.2" "electron-prebuilt": "^0.36.
浏览 2提问于2016-03-16得票数 0
回答已采纳
刚开始学习React，当我点击submit按钮时，我不知道如何从我的textfield中获得这个值。下面的例子是：，但它们从来不介绍如何获取textfield的值。我尝试过很多方法，但是一直没有定义好这个值。以下是我的当前代码：
import React from 'react';
import ReactDOM from 'react-dom';
import Button from 'material-ui/Button';
import TextField from 'material-ui/TextField';
impo
浏览 3提问于2017-11-19得票数 3
回答已采纳
2回答
我有一个Material-UI Autocomplete组件。为了防止用户选择同一元素两次(这会使id号加倍)，我希望将该元素从下拉列表中完全删除。
例如，如果选择了"Shawshank Redemption“，它应该被添加到列表中，并从下拉列表中完全删除，但不会更改JSON数据。
我试过在filterOptions上使用过滤器，但似乎不起作用。
import React, { useState } from "react";
import TextField from "@material-ui/core/TextField";
import Auto
浏览 3提问于2021-10-10得票数 1
1回答
材质UI自动完成下拉定位
、、、
是否有任何简单的方式来定制资料UI自动完成，以便它的Popper下拉可以定位相对于文本光标(类似于VS代码智能感知下拉列表)？我有一个多行Textfield组件作为输入字段。
代码如下所示：
import React from "react";
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import TextField from "@material-ui/core/TextField";
import Autocomplete from
浏览 1提问于2021-01-25得票数 2
我想水平地对齐位于这个TextField中心的标签：
import React from "react";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
export default function BasicTextField() {
return (
<TextField
浏览 8提问于2021-06-03得票数 1
回答已采纳
我目前正在实现Material-UI Autocomplete组件，我希望每个选项标签都显示一个图标和一些文本。但是，我只希望弹出器是文本输入的全宽，然后向通常会在弹出器宽度上溢出的任何文本添加一个省略号。
在我的renderOption方法中，如果我返回<Typography noWrap>"Text"</Typography>，它会成功地强制文本带有省略号，但是如果我将它放在网格或弹性框中，以便也包括图标，那么弹出器组件将能够水平滚动。是否有一种方法可以将弹出器视口固定为自动完成的宽度，以便renderOption方法中的文本可以换行？
import
浏览 15提问于2021-03-03得票数 1
如果执行下面的代码并只输入日期，渲染过程将运行，日期输入将被清除。 此TextField旨在用作此组件的搜索条件。 import * as React from 'react'
import { TextField } from '@material-ui/core';
export const App = () => {
const [loading, setLoading] = React.useState(false)
const [date, setDate] = React.useState()
React.useE
浏览 19提问于2019-04-02得票数 2
回答已采纳
1回答
我从Material中获取时间选择器中的两个输入，并将它们存储在一个数组中，我可以在控制台日志中看到它们。在将表或芯片组件存储在数组中之后，我希望从该对象数组中生成一个表或芯片组件。但是，在我单击按钮后，注释就呈现出来了。但是，如果我事先提供了值，它就是呈现芯片组件。我将提供下面的源代码，而且似乎我的数组正在被覆盖，而不是每次都生成新的条目。谢谢
import React, { useState } from "react";
import { makeStyles, useTheme } from "@material-ui/core/styles";
imp
浏览 4提问于2021-04-22得票数 0
回答已采纳
我试图在react中设置Textfield的默认值。它的工作没有材料-ui Textfield。但是当我使用Textfield时，它不起作用。例如。使用“输入”，但不使用"TextField“。
我想用它来编辑表格。请帮我找出解决办法。提前谢谢你。下面是该示例的代码。
import React,{useEffect,useState } from "react";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/
浏览 0提问于2021-09-23得票数 0
所以我尝试在Material UI中在我的卡上显示一个图像，但是图像从来没有出现过，我非常确定图像的目录是正确的。此外，如果可能的话，有人可以帮助我模块化我的代码，因为你可以看到我的一些代码正在重复(例如，负责设置边距的框)，我尝试使用HOC，但我一直收到这个错误Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export you
浏览 8提问于2020-06-28得票数 0
回答已采纳
1回答
我想点击一个按钮，然后导航到下一页，下面是我的按钮：
<RaisedButton label="Sign In"
style={style}
labelColor="#fff"
onClick={this.navigateToHome}
backgroundColor="#20B2AA" />
这就是我将onClick方法设置为路由到下一页的方式，但它不起作用：
navigateToHome = () => {
<Route
浏览 5提问于2017-11-09得票数 1
1回答
我正在创建一个表单，从我的公司DB中提取一些数据，但是字段不是一行对齐的。最初的代码是使用自定义图像来删除字段，但它从不内联。我尝试创建一个新版本，其中4个字段将与delete按钮内联。这就是我到目前为止所拥有的。
import React from "react";
import ReactDOM from "react-dom";
import Grid from "@material-ui/core/Grid";
import TextField from "@material-ui/core/TextField";
i
浏览 2提问于2019-10-16得票数 4
回答已采纳
1回答
我有一个特殊的TextField包装器，用于一个似乎运行良好的资料-UI字段。由于某些原因，当我使用本机资料UI栏位时，他们不会在提交时更新表单资料。
下面是相关的代码(但我在文章末尾添加了一个代码沙箱，以帮助演示这个问题)
TestForm.tsx
import { Card, CardActions, CardContent } from "@material-ui/core";
import { Form, Formik, Field } from "formik";
import React from "react";
import Su
浏览 8提问于2021-06-28得票数 0
回答已采纳
1回答
表单提交后重定向用户
、、、
我有这个例子作为一个反应形式与类型记录和材料-UI。
import React, { useState } from "react";
import TextField from "@material-ui/core/TextField";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
import { Box, Button, Container, Grid, Typography } from "@material-ui/core
浏览 9提问于2021-09-23得票数 0
回答已采纳
我想将本地存储值设置为我的状态。我的代码如下。请让我知道。因为根据我的代码，它不会被设置，我想把我的状态显示成TextInput的值。一旦我第一次尝试获取它正在获取的值，但是一旦它重新加载并尝试从ComponentDidMount获取，它就显示为null。 import React, { Component } from 'react';
import TextField from '@material-ui/core/TextField';
import Container from '@material-ui/core/Container'
浏览 3提问于2019-12-15得票数 0
回答已采纳
我建立了一个组件的反应和材料-UI。我用的是React和Redux。
我的index.jsx如下所示：
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import configureStore from '../store/conf
浏览 2提问于2017-04-09得票数 14
回答已采纳
我在AccordionSummary (Material-UI)中有一个带有TextField的Accordion，当单击它时，它会打开表单的其余部分。然而，我不知道如何阻止字段上的多次单击触发传播，以便在第一次单击后打开和关闭折叠内容。我不希望在AccountSummary中第一次单击后，新出现的可见表单内容消失。我知道第一次输入该字段时如何禁用传播，但不知道如何只允许传播一次？ import React from "react";
import { Formik, Field, Form } from "formik";
import { TextFiel
浏览 16提问于2020-09-18得票数 0
当使用TextField 作为具有大型数据集(1000个项)的Select字段时，在挂载/卸载列表时会出现明显的延迟。
import React from 'react';
import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField';
const TextFieldSelect = () => {
const [value, setValue] = React.useState('&
浏览 0提问于2019-09-05得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
