How to resize the select component in grommet react js?

Question

I am creating a form in the front end In that I use texInput, radio button, Select component. All the texInput, radio button component are in one size as per alloted but the select component size is very small please help me to solve the select component in the same size as per textinput component

Answer 1

put your form in a container and override the css of the select component :
css----------------
    .yourClassName{
        width: 100%!important;
    }
html-----------------------
    <Container>
      <Col md={{ span: 6, offset: 3 }}>
      <Form onSubmit={this.onSubmitForm}>
                  <Form.Row>
                    <Col md={{ span: 3 }}>
                      <Form.Group as={Row} controlId="Email">
                        <Form.Label>Email Address</Form.Label>
                        <Form.Control type="email" placeholder="Enter Email" name="Email" 
                           value={this.state.Email} onChange={this.handleChange} />
                      </Form.Group>
                    </Col>
                    <Col md={{ span: 3}}>
                      <Form.Group as={Row} controlId="Name">
                        <Form.Label>Name</Form.Label>
                        <Form.Control type="text" placeholder="Enter Name" name="Name" 
                          value={this.state.Name} onChange={this.handleChange} />
                      </Form.Group>
                    </Col>
         </Form.Row>
         <Form>
      </Col>
    </Container>