将样式设置为包含 TextInput 字段的 div答案

【问题标题】：set styling to div which contain TextInput field将样式设置为包含 TextInput 字段的 div
【发布时间】：2025-12-14 01:40:02
【问题描述】：

我是反应和材料 ui 的新手。我正在使用材料 ui 版本“1.0.0-beta.17”并反应 15.6.2。还有 styled-components 2.0.0 和 styled-components-breakpoint 1.0.1。

我在一个 div 元素中有两个 TextInput 字段。

const mycomponent = ({props}) => {
  <div>

    <SomeComponent />
    <div>
       <TextInput id="testId1" />
       <TextInput id="testId2" />
    </div>

  </div>
}

现在渲染时，它会为每个输入字段添加额外的父 div 像这样，

<div>
    <div class="field--testId1">
       <div class="FormItem__ElementWrapper-s14tem39-3 bgVlIQ">
           <input id="testId1">
       </div>
    </div>

    <div class="field--testId2">
       <div class="FormItem__ElementWrapper-s14tem39-3 bgVlIQ">
           <input id="testId2">
       </div>
    </div>
</div>

现在如何定位到 div 以应用具有类名字段--testId1、字段--testId2 的样式。这里的classname是默认生成的material ui，例如

.field--testId2{
  width: "48%",
  float: "left"
}
.field--testId2{
  width: "48%",
  float: "left"
}

我正在学习 react 和 material ui，因此非常感谢任何帮助。

【问题讨论】：

TextInput 是基于 Material UI 中的 Input 的自定义组件吗？
我用这个：material-ui.com/styles/basics
好的。您想用field--testId1 或输入本身更改输入的包装器吗？
@Mirakurun 是自定义组件。
ronen 提供的解决方案对我有用。

标签： javascript css reactjs material-ui styled-components

【解决方案1】：

您应该使用@material-ui/styles 来扩展组件的样式。喜欢这个答案，它与您的情况类似：https://*.com/a/67512965/8950820。这是一个例子：

您应该使用@material-ui/styles 来扩展您的文本字段样式，如下所示：

import React from 'react';
import { makeStyles, TextField } from '@material-ui/core';

const useStyles = makeStyles({
  textField: {
    border: 0,
    borderRadius: 3,
    padding: '0px 30px',
    // Other styles here...
  },
});

export default function MyComponent() {
    const classes = useStyles();
    return (
        <div>
            <TextField 
                size="large"
                variant="outlined"
                label="A text field title"
                className={classes.textField}
            />
        </div>
    );
}

通过此链接了解有关文档的更多信息：@material-ui.com/styles

【讨论】：

您好。可以将基于链接的答案制作成 cmets。如果你更希望它是一个答案。考虑包含一个代码 sn-p 以便下次更好地到达。
我刚刚注册，我的个人资料不允许我对问题作者的帖子发表评论。这就是我将链接放在响应中的原因。

【解决方案2】：

如果您想定位具有input 的div，则可以按照以下步骤操作

向父 div 添加一个类，比如说wrapper
使用>css selector定位最近的div

.wrapper > div {
  border: 1px solid red;
  width: 48%;
  float: left;
  margin-left: 1%;
}

input {
  width: 100%;
  box-sizing: border-box;
}

<div class="wrapper">
    <div class="field--testId1">
       <div class="FormItem__ElementWrapper-s14tem39-3 bgVlIQ">
           <input id="testId1">
       </div>
    </div>

    <div class="field--testId2">
       <div class="FormItem__ElementWrapper-s14tem39-3 bgVlIQ">
           <input id="testId2">
       </div>
    </div>
</div>

【讨论】：

【解决方案3】：

为了覆盖现有类，您可以添加样式组件包装器而不是包装 div 并覆盖子类：

 const TextInputWrapper = styled.div`
     .field--testId2 {
          // your custom styling
     }
 `
<TextInputWrapper>
   <TextInput id="testId1" />
   <TextInput id="testId2" />
</TextInputWrapper>

【讨论】：

【解决方案4】：

您可以直接为您的文本字段组件提供类，您可以添加您的自定义样式。

  <TextInput className="your-class" id="testId1" />

【讨论】：