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

Question

我是新手，material ui。我正在使用 material 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 以应用具有 class 名称字段--testId1、字段--testId2 的样式。这里classname是默认生成materialui, 例如

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

我正在学习 React 和 material ui 所以非常感谢任何帮助。

Answer 1

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

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

Answer 2

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

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

Answer 3

如果您想要定位 div 其中有 input，您可以按照以下步骤操作

向父 div 添加 class，假设 wrapper
使用 > css selector

.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>

Answer 4

你应该使用 @material-ui/styles to extend your component's styles. Take a like at this answer, it's similar to your case: 。这是一个例子：

您应该使用 @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>
    );
}

在此 link 了解有关文档的更多信息：@material-ui.com/styles

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

set styling to div which contain TextInput field

javascript

css

reactjs

material-ui

styled-components