score:1

Accepted answer

there are no such things as built-in classes.

form-group is a bootstrap (css framework) class, so you should install bootstrap first to get these.

npm: npm install bootstrap

yarn: yarn add bootstrap

in your index.js file, make sure you import bootstrap:

import 'bootstrap/dist/css/bootstrap.min.css';

now you should be able to use the form-group classname.

if you want to apply your own css next to the bootstrap css, you could create the class like you did but give it a different name like this:

.form-group-margin {
  margin-bottom: 0.2rem;
  margin-top: 0.2rem;
}

and apply it combined with the bootstrap class like this:

<div classname="form-group form-group-margin">
   <label htmlfor="email"></label>
    <input
      type="text"
      classname="form-control"
      placeholder="email"
      value={email}
      onchange={onchangeemail}
      validations={[required, validemail]}
    />
</div>

score:-1

try to set height and width and apply other styling to div. also remove default styling from browser.

*{
  margin:0;
  padding:0;
 }

score:1

this may be a silly suggestion but have you tried appending !important to your styles?

.form-group {
  margin-bottom: 0.2rem !important;
  margin-top: 0.2rem !important;
}

!important should override the default styles and use what you passed in for the margins.

also here is an example of this in action.

edit stoic-grothendieck-gbvxk


Related Query

More Query from same tag