set styling to div which contain TextInput field

react input styling
styled-components
react, inline style
material-ui
material-ui textfield
text field
react input component example
react custom input component

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>

Building A Beautiful Text Input in React | by Will Howard, Our text input will be wrapped in a div with class 'field'; a wrapper to the following style to set up the basic appearance of the text input: .field { .signup-text-input { // styles here } 3. Basic styling methods for single-line text input fields. Single-line fields are the most common input fields used in forms. Usually, a single-line text input is a simple box with a border (this depends on the browser). Here’s the HTML markup for a single-line field with a placeholder.

Basics, Get Started with styled-components basics. If you use a package manager like yarn that supports the "resolutions" package.json field, we When setting the primary prop to true, we are swapping out its background and text color. Render a styled text input with the standard input color, and one with a custom input color. If you set type with vw (viewport width) units, you can find an exact number where the text pretty closely fits the container and doesn’t break as you resize. I’d call this a magic number . In this case, font-size: 25.5vw; works down to a 320px viewport, but still will break much lower than that.

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

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

Input group � Bootstrap, <div class="input-group mb-3"> <div class="input-group-prepend"> <span < input type="text" class="form-control" aria-label="Text input with radio button"> </ div> validation styles are only available for input groups with a single <input> . Sorry if this question is very basic, but I'm trying to get back into programming and I'm stuck with this. I want to have text input into a &lt;div&gt; in HTML, but I don't want the default chat

Text field - Material Design, Note: Do not use mdc-text-field--outlined to style a full width text field. Note: Do density($density-scale), Sets density scale for default text field variant. Returns an object representing the native text input element, with a similar API shape. This is a bad answer. It looks like it works if you just glance at it, but go try the fiddle. It is actually chopping of half the input box, but you can't tell unless you start testing it out.

.text(), Get the combined text contents of each element in the set of matched elements, including The result of the .text() method is a string containing the combined text of all matched elements. <div class="demo-box">Demonstration Box</div> </style>. <script src="https://code.jquery.com/jquery-3.5.0.js"></script>. </head> . Note that we have set the box-sizing property to border-box. This makes sure that the padding and eventually borders are included in the total width and height of the elements. Read more about the box-sizing property in our CSS Box Sizing chapter.

CSS :focus Selector, Example. Select and style an input field when it gets focus: input:focus { Definition and Usage. The :focus selector is used to select the element that has focus. Contains() is a method which is used to find the value of those attribute which changes dynamically. For example, login information. Contains() method has the following general form which is given below:

Comments
  • Is TextInput your custom component based on Input from Material UI?
  • I use this: material-ui.com/styles/basics
  • Ok. Do you want to change the wrapper around input with field--testId1 or the input itself?
  • @Mirakurun It is custom component.
  • The solution which ronen provided worked for me.