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

Question

我是 React 和 Material UI 的新手。我正在使用 Material ui 版本“1.0.0-beta.17”并使用react 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，所以非常感谢任何帮助。

Answer 1

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

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