Set Styling To Div Which Contain TextInput Field

I'm new to react and material ui. I'm using material ui version "1.0.0-beta.17" and react 15.6.2. Also has styled-components 2.0.0 and styled-components-breakpoint 1.0.1.

I have two TextInput fields in a div element.

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

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

  </div>
}

Now when it render, it adds additional parent div to each input fields Like this,

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

Now how can I target to the div to apply styles with class name field--testId1, field--testId2. Here classname are generated by default material ui, for example

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

I'm learning react and material ui so any help is much appreciated.

in order to override an existing class, you can add a styled-component wrapper instead of the wrapping div and override the child classes:

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