Material UI TextField标签定位不正确
Material UI是一个流行的前端UI框架，它提供了一系列的组件，包括TextField标签用于输入文本。当使用Material UI的TextField标签时，有时候可能会出现标签定位不正确的问题。
标签定位不正确可能是由于以下几个原因导致的：
- CSS样式问题：TextField标签的样式可能与页面的其他元素样式冲突，导致标签定位不正确。可以通过调整CSS样式或者使用内联样式来解决。
- 容器布局问题：TextField标签可能没有正确放置在容器中，导致定位不正确。可以检查容器的布局方式，确保TextField标签被正确放置。
- 响应式设计问题：如果页面是响应式设计的，TextField标签可能没有正确适应不同屏幕尺寸导致定位不正确。可以使用媒体查询或者响应式布局来解决。
解决Material UI TextField标签定位不正确的方法包括：
- 检查CSS样式：确保没有其他样式与TextField标签的样式冲突。可以使用浏览器的开发者工具检查样式并进行调整。
- 调整容器布局：确保TextField标签被正确放置在容器中，并且容器的布局方式正确。
- 使用响应式设计：如果页面是响应式设计的，可以使用媒体查询或者响应式布局来确保TextField标签在不同屏幕尺寸下的正确定位。
腾讯云提供了一系列的云计算产品，其中与前端开发相关的产品包括云服务器、云存储、云函数等。你可以通过腾讯云的官方文档了解这些产品的详细信息和使用方法。
- 腾讯云服务器（CVM）：提供可扩展的云服务器实例，支持多种操作系统和应用场景。详情请参考：腾讯云服务器
- 腾讯云存储（COS）：提供安全可靠的对象存储服务，适用于存储和处理各种类型的文件和数据。详情请参考：腾讯云存储
- 腾讯云函数（SCF）：提供无服务器的事件驱动计算服务，可以快速构建和部署前端应用所需的后端逻辑。详情请参考：腾讯云函数
希望以上信息对您有帮助！
相关·内容
下面您可以从自动完成的MUI文档中找到一个示例，在这里，我在选项列表之前传递了一个指向google的链接。但是，我不能单击该选项，事件目标只是MuiAutocomplete，而不是我要传递的<a>。
import React from "react";
import TextField from "@material-ui/core/TextField";
import Paper from "@material-ui/core/Paper";
import Autocomplete from "@material-ui/l
浏览 4提问于2019-12-11得票数 4
回答已采纳
我想水平地对齐位于这个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
回答已采纳
1回答
我正在经历一个麻烦，使我的反应形式与中心一致。
这是我的表格：
我正在使用reactjs资料用户界面。
<Grid item xs={12}>
<Grid item xs={12}>
<FormGroup noValidate autoComplete="on">
<TextField
label="SSN"
type="number"
浏览 4提问于2019-10-21得票数 0
回答已采纳
? 我使用内部带有Icon的Material-UI TextField，如下所示。"Your good name here“的标签应该放在图标旁边，而不是重叠。 在我将InputLabelProps={{ shrink: false }}添加到TextField之后，就会发生这种情况。 我怎样才能正确地定位这个位置？有什么帮助吗！ 提前感谢！=) This is my code pen import React from "react";
import { makeStyles } from "@material-ui/core/styles"
浏览 15提问于2021-03-27得票数 4
回答已采纳
我有Material-UI TextField：
<TextField id="gen_ref_num" className="col-6 form-control-sm" label="Number" variant="filled" value={this.props.invoice.gen_ref_num} onChange={this.handleChange}/>
并且this.props.invoice.gen_ref_num已经预加载值。不幸的是，标签与内容重叠。当我开始编辑字段时，标签会向上移动并位于正
浏览 1提问于2021-06-01得票数 0
3回答
我在TextField组件中使用с而不是自定义标签。样式不适用于组件中的标签。我做错了什么？
import React, { PureComponent } from 'react'
import { withStyles } from '@material-ui/core/styles'
import TextField from '@material-ui/core/TextField'
const StyledTextField = withStyles({
root: {},
浏览 0提问于2019-04-09得票数 1
我有一个基本的实现暗模式的材料用户界面和反应，问题是如何使TextField辅助文本，标签，边界变化根据黑暗和光模式切换。TextField是：
<TextField helperText='Sample text' label="Title" variant="outlined" />
更新: TextField必须有深色的helperText，标签，边框在光模式，浅色在暗模式。暗光模式的基本实现是：
import { createTheme, ThemeProvider } from '@material-ui/core/
浏览 11提问于2022-01-20得票数 3
我试图在概述的变体中使用Material中的TextField组件，但是由于某种原因，标签会直接通过值吗？我怎么才能解决这个问题？
我在下面的codesandbox.io中复制了它：
App.tsx
import { TextField } from "@material-ui/core";
import "./styles.css";
export default function App() {
return (
<div className="App">
<TextField variant=
浏览 2提问于2021-11-24得票数 1
回答已采纳
1回答
物料界面-是否自动完成默认边距？
、、、、
我是第一次接触material-ui，对于自动补全的边距，我看不到任何东西。我有一个结合了自动完成和TextInput的表单。但是Autocomplete和TextInput的位置(对我来说)很奇怪。autocomplete会呈现某种带有TextInput没有的边距的“框”吗？在这里，我不得不在TextInput上添加页边距以使它们对齐，但我仍然在自动完成上留下我想要的marginLeft。显然，我可以为它添加样式，但这会导致{xs}大小在缩放时崩溃。 正如你在图片中看到的，自动补全的边距与TextInput相去甚远： ? 任何能让我走上正确方向的东西都是非常感谢的。 代码如下： imp
浏览 20提问于2021-09-17得票数 0
回答已采纳
1回答
我正在尝试使用测试一个重要的ui文本字段。
我面临的问题是，为了测试物质ui textField，我必须使用这个属性方法
screen.getByLabelText()
这是可行的，但是我不想在用户界面上显示标签，我希望标签保持隐藏，因为我已经使用了资料用户界面<FormLabel>**.**。
我尝试使用inputProps并使用getByTestId()方法在元素上传递data-testId。但我知道这个错误
TestingLibraryElementError:通过：找到多个元素。
editForm.test.tsx
import "@testing-libr
浏览 4提问于2020-05-27得票数 15
回答已采纳
我正在使用Material TextField和Material Tab。我有两个制表符，每个标签中都有一个文本字段。单击TextField后，应该为标签打开边框，但如果当前的Tab不是Tab1 !！
我设法在中再现了这个问题，代码也包括在下面。
import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-
浏览 1提问于2019-12-08得票数 2
回答已采纳
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
我想在react-admin上建立一个自定义登录，当电子邮件到达我的自定义身份验证提供商时，它变得未定义，但密码仍然可用。 import React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '
浏览 26提问于2021-06-25得票数 0
回答已采纳
我想在React.js的Material UI中显示Autocomplete TextField组件的默认值。从用户配置文件自动加载的预填充值，可以使用列表中的其他值进行更改。 下面是我的代码： import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
export const ComboBox =() => {
re
浏览 10提问于2020-04-15得票数 6
回答已采纳
我目前正在使用'createTheme‘从Material UI自定义我的TextField输入的主题。 为了进行更改，我查看了https://mui.com/customization/default-theme/上的材料UI默认主题，并对适当的标签进行了更改。 我想要更改TextField的默认边框-当TextField上没有悬停或焦点时显示的边框。边框当前为灰色 有人知道哪个默认主题标签指的是那个边框吗？我好像找不到它
浏览 39提问于2021-11-21得票数 0
您能告诉我如何在物料中更改标签颜色和输入错误状态的字段颜色吗？ 我试着这样做 <FormControl>
<TextField
required
error
classes={{
error: this.props.classes.error
}}
InputLabelProps={{
浏览 11提问于2019-03-01得票数 0
回答已采纳
当我尝试使用Material UI创建自动完成标签时，收到以下错误： ? 自动完成的代码如下所示： import React, {useState, useEffect, useContext} from 'react';
import ReactDOM from "react-dom";
import {withStyles} from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Au
浏览 36提问于2020-03-25得票数 1
1回答
如果没有设置默认值，如何保持像T.M.T倾斜这样的标签位置？我使用的是素材界面。
import TextField from '@material-ui/core/TextField';
<TextField
fullWidth
label="T.M.T"
id="tmt"
name="tmt"
type="date"
value=""
variant="outlined"
/>
浏览 4提问于2021-06-16得票数 1
回答已采纳
我正在尝试学习Material-UI，并尝试创建一个“表单”，查看他们的文档(我在理解文档的步调时遇到了一些困难，并且不知道我是否确实使用了预期的标签来创建表单:P)。无论如何，我想要居中我的“表单”，在摆弄了Material-UI文档中的代码和我对css的知识之后，我设法使“表单”居中，但只是水平居中，似乎不能使它垂直居中。我还不知道如何使用我自己的css代码以及material-ui中提供的功能，事实上，我希望这是纯粹的material-ui，因为我觉得将css与Material-UI一起使用会使事情变得更加复杂，当我开始使用material-ui和css的混合来开发样式的大型应用程序时。
浏览 2提问于2021-05-08得票数 0
我已经使用材料UI组件自动完成来呈现一些选项，但我希望自动完成让用户避免键入以获得建议。有没有办法让它像选择下拉列表和阻塞textField输入一样工作。在这里，我可以使用Material UI select下拉菜单，但是有没有什么方法可以将自动完成更改为select？ 我尝试将禁用传递给TextField属性，但看起来完整的下拉列表是禁用的，并且它仍然允许输入文本。 下面是我要重用的autocomplete组件： <Autocomplete
fullWidth
value={selected}
onChange={handleChange}
rend
浏览 40提问于2021-04-20得票数 0
1回答
我有一个问题与TextField标签和占位符文本渲染不正确的材料UI。我不确定为什么会发生这种情况，因为我直接从Material-UI演示中复制和粘贴。我试过在阅读其他帖子时在InputProps和InputLabelProps中调整字体大小，但都没有奏效。无论出于什么原因，标签和占位符都没有在输入域或轮廓中居中。
下面是我的组件代码：
import React, {useState, useContext} from 'react'
import { GlobalContext } from '../context/GlobalState';
//
浏览 15提问于2020-03-14得票数 2
我的react应用程序中有一个精选的文本视图。如何在从该文本视图中选择项目后更改字体颜色。 <div>
<TextField
id="standard-select-currency"
select
fullWidth
label="Filter By"
InputLabelProps={{
shrink: true,
style: { color: "#fff"
浏览 27提问于2019-06-26得票数 0
回答已采纳
2回答
通过阅读资料-ui文档和在线示例，似乎有不同的方法来导入相同的项目： import TextField from 'material-ui/TextField';
// or
import TextField from '@material-ui/core/TextField';
// or
import { TextField } from '@material-ui/core'; 不同的导入方式有什么不同？
浏览 20提问于2019-10-17得票数 1
回答已采纳
Material-UI多行TextField中的输入文本相互重叠(而不是标签)。
请参阅CodeSandBox中的示例和代码：
我怀疑这可能与我将font - size增加到30，但行高(或其他东西)仍然配置为默认大小字体的事实有关。
截图示例：
import React from "react";
import styled from "styled-components";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "
浏览 0提问于2019-11-13得票数 5
我有一个TextField，当它被聚焦时，我希望它的标签被着色为黑色。我使用这个类变量将类添加到InputProps，但不幸的是，它被chrome dev工具中material UI的默认样式所覆盖。下面是代码。请查看chrome开发工具的截图。 const useStyles = makeStyles((theme) => ({
inputLabelFocused: {
color: "black",
},
}));
const classes = useStyles();
<TextField
id="toDo"
浏览 16提问于2021-09-16得票数 3
2回答
我需要将一些样式应用到Redux表单字段的标签上。Redux表单API没有提到任何样式标签的方法。classes.formField类被应用于字段本身，而不是标签。
这也可能是一个关于强制继承的问题，因为在本例中，标签不是继承父样式。
import { Field } from 'redux-form'
import TextField from 'redux-form-material-ui/lib/TextField'
<Field
className={classes.formField}
component={TextFiel
浏览 1提问于2018-03-20得票数 2
回答已采纳
1回答
今天从Material开始，不知道为什么这个函数handelSubmit()没有被调用。控制台函数上没有打印的东西是不被调用的。我不知道我在哪里做错了，谢谢。，我从表单标签调用这个函数，也尝试从外部调用，但是它不起作用。
import React, { useState } from 'react';
import Typography from '@material-ui/core/Typography';
import { Button, Container } from '@material-ui/core';
import { TextF
浏览 6提问于2021-09-15得票数 1
回答已采纳
1回答
我正在使用react-phone-input-2。对于其他输入，我使用带标签的material ui textfield。有没有可能添加标签的反应电话输入，如材料用户界面与变体概述。
<PhoneInput
inputProps={{
name:'phone',
required:true,
autoFocus:true
}}
浏览 9提问于2021-06-07得票数 0
回答已采纳
我刚接触Material-UI，我不能弄明白，如何改变以灰色显示的标签的颜色。我想把它放在black里。有人能帮我解决这个问题吗？
代码如下：
import React from "react";
import ReactDOM from "react-dom";
import { TextField, Button, Grid } from "@material-ui/core";
class App extends React.Component {
render() {
return (
<Grid cont
浏览 1提问于2020-03-18得票数 4
回答已采纳
我已经阅读了文档，但我有困难如何在材料UI的样式工作。 基本上，我有以下无线电群组组件： import React from 'react'
import Radio from '@material-ui/core/Radio'
import RadioGroup from '@material-ui/core/RadioGroup'
import FormControlLabel from '@material-ui/core/FormControlLabel'
import FormControl from '@ma
浏览 18提问于2020-11-03得票数 1
回答已采纳
我想在TextField组件中更改标签和文本的颜色。
我正在使用material-ui@next.
0.15的文档不起作用(我已经查过了)。
有人能给我举个简短的例子吗?如何覆盖浮动标签？(不改变一般主题！)
谢谢
浏览 2提问于2017-11-16得票数 3
当我在一个组件中使用Formik -material ui TextField和原始资料-ui TextField (它绑定到带有fieldToTextField函数的Formik)时，我有一个警告。
Prop className不匹配。服务器：“PrivateNotchedOutline legendNotched 11 PrivateNotchedOutline PrivateNotchedOutline 12”客户端：“PrivateNotchedOutline Client 7 PrivateNotchedOutline LegendateNotchet-8”。
只有当组件的var
浏览 2提问于2021-09-20得票数 0
对不起，我的英语很差。
“TextField”of 在日语输入方面有问题。在“对话框”标签中使用时。
第一封信是未经考虑而确定的。例如，输入'da‘应该是'だ'，'pa’应该是'ぱ‘。但它变成了'dあ‘和'pあ’，因为第一个字母是自动确定的。
输入第一个字母时，应暂停输入第二个字母。
有人有主意吗？
import React, { Component } from 'react';
import Dialog from 'material-ui/Dialog';
import TextField from
浏览 4提问于2016-07-11得票数 2
回答已采纳
9回答
我想要更改Material-UI的TextField的浮动标题的颜色。
正如文档中所述，我将对象颜色作为floatingLabelStyle传递
<TextField floatingLabelStyle={{color: somecolor }} />
但这适用于标签的两种状态-在输入上方和输入上悬停，而焦点模糊时，标签应该是灰色的。
我猜我正在重写某种CSS转换，但是我不知道如何让它工作。有什么建议吗？
浏览 8提问于2016-03-04得票数 19
任务是使用Material概述的输入字段(来自"@material-ui/core": "^4.12.2",的TextField组件)并使用自定义的蓝色对其进行样式设置。
以下是我所取得的成就：
当前InputLabel的主题覆盖：
import { createTheme } from "@material-ui/core/styles";
export const muiTheme = createTheme({
overrides: {
MuiInputLabel: {
outlined: {
浏览 5提问于2021-12-30得票数 0
回答已采纳
如何在textField中显示选定的选项？我能用什么道具？ 单击输入字段时会显示选项，但选择选项标签后，所选文本不会显示在文本字段中。 这是我正在使用的代码： import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import CircularProgress from "@material-ui/core/Circu
浏览 13提问于2019-12-06得票数 2
回答已采纳
我想使用Material-UI Next textfield error props ，道具类型是boolean。之前版本的Material-UI props名称为errorText，道具类型为node 。
Textfield Material-使用errorText props的UI早期版本：
<TextField
name='name'
floatingLabelText='Name'
hintText='Type your name'
value={this.state.fields.name}
onChange=
浏览 3提问于2018-03-22得票数 30
回答已采纳
1回答
我是新的反应，我正在创建一个应用程序，将在波斯语(从右到左的脚本，如阿拉伯语)，我使用的材料UI框架。问题是，我无法从rtl格式的Material中获得组件。我遵循以下步骤：
我在我的html标签中有作为rtl的方向。
我已经点击了rtl切换按钮并复制了所有代码，但粘贴它时，组件并不是从右到左，部分是从右到左。
我遵循了写在他们网站上的从右到左的指南，但我无法让jss库工作。
请有人澄清如何使用这个jss在详细的，因为我是新的REACTJS。
我正在附上一个表格，我想成为rtl格式。
import React from 'react';
import A
浏览 2提问于2020-03-25得票数 3
回答已采纳
我目前正在实现Material-UI Autocomplete组件，我希望每个选项标签都显示一个图标和一些文本。但是，我只希望弹出器是文本输入的全宽，然后向通常会在弹出器宽度上溢出的任何文本添加一个省略号。
在我的renderOption方法中，如果我返回<Typography noWrap>"Text"</Typography>，它会成功地强制文本带有省略号，但是如果我将它放在网格或弹性框中，以便也包括图标，那么弹出器组件将能够水平滚动。是否有一种方法可以将弹出器视口固定为自动完成的宽度，以便renderOption方法中的文本可以换行？
import
浏览 15提问于2021-03-03得票数 1
data = {"ConnectionString/File Url":"Please enter the file URL of the data from the cloud ",
"Credentials/SASToken":"Please enter the SAS Token of the data from the cloud"} 我有下面的数据，这些数据有助于使用循环创建Textarea，但使用的是相同的onchange函数。我想对所有文本区域使用相同的onchange，但问题是我只能获取值，而不能
浏览 15提问于2020-09-09得票数 0
我已经开始使用material-ui，但是我遇到了所有文本字段的问题，当我从web复制并粘贴示例时，它们不能很好地呈现 我安装了： yarn add @material-ui/core
yarn add fontsource-roboto
yarn add @material-ui/icons
yarn add @material-ui/lab
yarn add @material-ui/pickers
yarn add @date-io/date-fns@1.x date-fns
yarn add @material/react-text-field 看不到“'Required *
浏览 77提问于2020-09-27得票数 0
回答已采纳
我不希望在输入字段中有所选选项的标签:它可能可以在renderInput属性中寻址，但我不知道如何处理。我知道有limitTags属性，但当它被选中时，选项仍然会显示在输入字段中。下面是一个示例代码： 有什么建议吗？ import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@mate
浏览 35提问于2020-10-15得票数 0
回答已采纳
我正在创建一个material UI树视图组件，.Here我的树有几个树项作为子项。我的目标是我将能够更新我尝试使用树项目tag.But中的文本字段组件的children.So的名称，但它不起作用。有谁能帮我重命名它的孩子吗？换句话说，我需要一个可编辑的树。
在这里我使用了Textfied，如下所示。
const item = <TextField
name="Application"
label="Application" readOnly={false}></TextField>;
<TreeItem nodeId="
浏览 0提问于2019-08-19得票数 2
试图使用材料Ui实验室的复选框。但是，在npm安装了三个依赖项：@material-ui/lab、@material-ui/core和@material-ui/icons之后，我收到了以下错误：
./node_modules/@material-ui/core/esm/Portal/Portal.js Attempted import error: 'HTMLElementType' is not exported from '@material-ui/utils'.
我的进口商品如下：
import React from 'react';
im
浏览 7提问于2020-11-13得票数 2
回答已采纳
1回答
嗨，我试图实现材料UI自动完成dropbox旁边的图标显示的文本。我的实现正在工作，但当我选择其中一个选项时，它不会显示。问题出在代码的这一部分： renderInput={params => (
<Fragment>
<TextField
{...params}
variant="outlined"
浏览 22提问于2019-12-19得票数 9
1回答
我想自定义TextField的浮动标签。
我知道创建一个新的就像下面这样，但是有没有更好的方法呢？
import TextFiled from 'material-ui/TextField';
class TextFiledNew extends Component {
static propTypes = {
}
render () {
return (
<TextFiled
floatingLabelFixed={true}
floati
浏览 0提问于2017-04-08得票数 0
我使用以下代码，但当我在框中键入文本时，它显示错误，没有提供太多信息。我的目标是能够在文本框中键入和显示文本。 import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import CardMedia from '@material-ui/core/CardMedia';
import { withStyles } from '@material-ui/core/styles';
import CardActi
浏览 8提问于2019-05-17得票数 1
回答已采纳
每当我在字段中输入一个字符时，焦点就会消失。我该如何纠正它呢？
"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
在浏览器上运行项目时出现了以下错误：
未能编译：
./node_modules/@material-ui/lab/esm/internal/svg-icons/Close.js
Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'.
我正在尝试实现 (来自“多值”部分中的示例)。
下面是我使用的代码：
import React from 'react';
import Chip from '@material-ui/co
浏览 6提问于2020-04-05得票数 12
回答已采纳
1回答
有办法把所有这些导入简化为一个吗？
我是新手，但我总是注意到所有东西都必须导入，特别是使用CSS组件。
你能告诉我怎么把这个缩短吗？
import { withStyles } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typogra
浏览 2提问于2020-03-15得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
