score:1
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.
Source: stackoverflow.com
Related Query
- React does not see css properties
- React css transition does not work correctly
- React hooks - setState does not update state properties
- React importing image does not work for CSS
- Tailwind CSS does not work with React App
- Passing properties to react component.Getting Error - Property 'firstName' does not exist on type 'Readonly<{}>'
- React changing records properties via map function does not work correctly
- tailwind css does not apply dark mode on react project
- React event target value from jsx element does not get bind to state and json array (Type error cannot read the properties of undefined )
- React synthetic event returned from onLoad() of <image> element inside <svg> does not have naturalWidth or naturalHeight properties
- React hooks - setState does not update some state properties
- Background color of button not updating immediately in React other css properties are working fine
- React Component CSS does not work when digit zero "0" is displayed but works fine with other values
- react navbar component css does not update when id is changed
- React Child Component does not update properties passed from Parent Component
- How do I access React State properties using TypeScript? Get property does not exist on type error
- Why does my css from a HTML/CSS/JS website not work on my React website?
- React does not see that the "markup changes" when content is nested in array
- CSS grid does not place items created with React and array.map
- React CSS does not display on mobile devices (Chrome, Safari, Firefox) but displays on Desktop Site
- Why does calling react setState method not mutate the state immediately?
- forEach() in React JSX does not output any HTML
- React inline style - style prop expects a mapping from style properties to values, not a string
- Property does not exist on type 'DetailedHTMLProps, HTMLDivElement>' with React 16
- Why does React Native not offer a justify-self
- Attempted import error: 'uuid' does not contain a default export (imported as 'uuid') In React
- React router 4 does not update view on link, but does on refresh
- React-redux store updates but React does not
- React wrapper: React does not recognize the `staticContext` prop on a DOM element
- How to solve Warning: React does not recognize the X prop on a DOM element
More Query from same tag
- Reconnect WebSocket in react js
- How to set a Modal popup with an image in React
- Passing parameters to onClick function received via props without binding this
- why do we need to install gatsby-plugin-styled-components after installed styled-components
- How to set travel mode of google directions api dynamically in reactjs?
- Error: Uncaught ReferenceError: React is not defined
- How can I use the current status of redux after the thunks and actions have finished?
- What's the difference between functional component and create component using useMemo() in React
- React fordwardRef with typescript
- How to redirect to component with previous created task
- How do I fix "Cannot assign to read only property 'style' of object" in this React component?
- React + Firebase undefined using click event
- enable button after the user fill all the fields and validation
- Making Simple Post Request With Axios, React.js and Spring
- Applying span on a string in react returns [object Object] instead of giving me the spanned text
- React onClick stops working after dialog has been shown
- Unexpected behavior when fetching data with hooks
- Material UI datepicker opening in top left corner
- Scroll navigation bar transparent on the right side?
- Next.js + react-gtm-module ReferenceError: document is not defined
- useBaseName is not available in history npm package
- How to update redux state of arrays?
- In react bootstrap, how do I increment a counter within a push?
- React: Can't "access" click handler within returning JSX
- Unhandled Rejection (TypeError): Cannot read property 'status' of undefined
- How to use loops in promises
- Loading SVGs within .scss with Webpack and svgr loader
- Attempted import error: 'makeStyles' is not exported from '@material-ui/core/styles'
- How do I send data from React to Node server using login form?
- react-slideshow-image package not loading images from google drive