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

2024-06-04 • 问答

我是新来的反应者，也是物质使用者。我正在使用材料ui版本“ 1.0.0-beta.17”并反应15.6.2。还具有样式组件2.0.0和样式组件断点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以应用具有类名field--testId1，field--testId2的样式。这里的类名是默认材质ui生成的，例如

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

我正在学习反应和用户界面，因此非常感谢您的帮助。

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

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

如果您要定位具有div的{{1}}，则可以按照以下步骤操作

将一个类添加到父div，让我们说input
使用wrapper >

css selector

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

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

您可以直接将类提供给文本字段组件，然后可以添加自定义样式。

<server-root>/user_<10digit-userid>/

您应该使用 @material-ui/styles 来扩展组件的样式。喜欢这个答案，它与您的情况类似：https://stackoverflow.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

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

clorchid 回答：将样式设置为包含TextInput字段的div

大家都在问