set styling to div which contain TextInput field

Question

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.

Answer 1

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>

Answer 2

If you want to target div which has input, than you can follow these steps

• Add a class to parent div, lets say wrapper
• Target the closest div using > 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 3

You give class directly to your textfield component and you can add your custom styles.

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

Answer 4

You should use @material-ui/styles to extend your component's styles. Take a like at this answer, it's similar to your case: https://stackoverflow.com/a/67512965/8950820. Here is and example:

You should use @material-ui/styles to extend your Text Fields styles like this:

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>
    );
}

Learn more about the documentation at this link: @material-ui.com/styles