React does not recognize CSS attributes

I am facing an issue with the CSS styling when using built-in tags like "form-group" in my code. Strangely, the browser does not apply the CSS when I use these built-in tags. However, if I define my own classes, such as "classes.form", the CSS is visible in the browser. When inspecting the code, the browser shows styles for ".form-group.scss" but not for my custom CSS.

Below is the code snippet where I am using the built-in tag "form-group":

<div className="form-group">
   <label htmlFor="email"></label>
    <Input
      type="text"
      className="form-control"
      placeholder="email"
      value={email}
      onChange={onChangeEmail}
      validations={[required, validEmail]}
    />
</div>

Here is the custom CSS I have defined:

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

Answer №1

Forget about built-in classes, they don't exist in this context.

form-group is actually a class from the Bootstrap CSS framework. To access it, you need to first install Bootstrap.

To install Bootstrap using npm, run: npm install bootstrap

If you prefer using Yarn, run: yarn add bootstrap

In your index.js file, ensure you import Bootstrap like so:

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

Now you can utilize the form-group class in your project.

If you wish to add your custom CSS alongside Bootstrap, you can do so by creating a new class with a different name, for example:

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

Then, you can apply this new class along 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>

Answer №2

It may seem unconventional, but have you considered adding !important to your CSS styles?

.section {
  padding: 1em !important;
  margin: 0.5em !important;
}

The !important declaration can help override default styles and prioritize the values you specify for margins and padding.

For a practical demonstration, check out this example.

https://codesandbox.io/s/random-example-abcde?fontsize=14&hidenavigation=1&theme=light

Answer №3

Experiment with adjusting the height and width of the div element while adding your own unique styles. Consider removing any default styles applied by the browser.

*{
  margin:0;
  padding:0;
 }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to have a React Component trigger a function with each state update

Using this specific component, the getDisplay function is triggered on every update like normal. When the <div> element is clicked, it becomes hidden: class Example extends React.Component { constructor(props) { super(props); thi ...

javascriptreactjsnpmstate

A Guide to Connecting a JavaScript File to an HTML Page with Express and Node.js

Struggling with integrating my JavaScript file into my simple NodeJS app. Traditional methods like placing the script in the header doesn't seem to work with Node. I've attempted using sendFile and other approaches, but none have been successful ...

javascripthtmlnode.js

What is the best way to enforce a required selection from one of the toggle buttons in a React form?

Is there a way to require the user to click one of the toggle buttons in a react form? I need to display an error message if the user submits the form without selecting a button. I tried using the "required" attribute in the form but it didn't work. H ...

javascriptnode.jsreactjs

What is the best way to retrieve an API response after submitting data?

Currently working on a React website with a node.JS REST API, I'm facing a challenge that I need help with. During the login process, my React form sends a POST request to my API. Since this is a School Project and I am working locally, my React app ...

node.jsreactjsexpressjwtmern

Unable to vertically align an image within a navigation bar item that is not the brand

Having a unique issue for which I cannot find a solution. In the navbar of Bootstrap 4, I am attempting to include an image next to one of the items, not the navbar-brand as commonly asked about. When Bootstrap 4 is loaded with a custom alpha dark theme, ...

htmlcssbootstrap-4

Creating a dropdown navigation menu using jQuery

I have been experimenting with creating a customized Drop Down menu using ul li and Jquery, following this helpful Tutorial. Here is the sample HTML Code for testing: <div id="dd" class="wrapper-dropdown-3" tabindex="1"> <span>OS</span> ...

javascriptjqueryhtmlhtml-lists

Tips for catching errors in Apollo Client while executing GraphQL queries

Here is my approach to querying data from a Graphql engine. export GraphQLWrap <TData, TParam = {}>({ query, extractData, children, queryVariables, skip, }: AsyncWrapProps<TData, TParam>) => { return ( <ApolloConsumer> ...

reactjsgraphqlmaterial-uireact-apolloapollo-boost

Compile an ASP.NET website into static files such as HTML, CSS, and JavaScript prior to deployment

Can a simple ASP.NET website without ASP webform or .NET controls be precompiled into static files such as HTML, CSS, and JavaScript? I am interested in utilizing the master page feature and Visual Studio IDE intellisense while still being able to deploy ...

asp.netasp.net-mvcvisual-studio-2010html

"Having trouble with defaultValue in react-hooks-form not functioning properly with NextUi Select component. Can

const fetchUserData = async (userId) => { const userApi = new UserAPI(); const result = await userApi.getInfoById(userId); const userData: Record<string, any> = result.data; const otherData = userData.other; for (const key in ...

reactjsnextui

issue with visibility of Angular Component

After following a straightforward YouTube tutorial for beginners on Angular, I encountered an issue. The tutorial covers how to use components, and even though I understand the concept well, the component simply does not appear no matter what I try. Here i ...

htmlangulartypescriptweb

Should Redux Reducer deep compare values or should it be done in the Component's ShouldComponentUpdate function?

Within my React Redux application, I have implemented a setInterval() function that continuously calls an action creator this.props.getLatestNews(), which in turn queries a REST API endpoint. Upon receiving the API response (an array of objects), the actio ...

javascriptnode.jsreactjsreduxreact-redux

Tips for Transitioning a Div Smoothly Upwards with CSS!

This is the code that relates to the title: #main { float: left; width: 20%; height: 10vh; margin-top: 10vh; margin-left: 40%; text-align: center; } #k { font-family: Questrial; font-size: 70px; margin-top: -7px; ...

htmlcsscss-transitions

Explore the capabilities of redux independent of the react framework

I've been searching for hours trying to find a way to access the store (to dispatch and observe) without using React Components, but have had no luck. Here's my situation. I created the store in the root of the App: import { Provider } from &ap ...

javascriptreactjsredux

The JavaScript require() function appears to be malfunctioning

Why am I encountering an error when trying to import a valid node_module? <script > var Twit = require('twit'); </script> Error: Uncaught ReferenceError: require is not defined I am puzzled as to why the require() function wor ...

javascripthtmlnode.jsapinpm

The anticipated package.json file at (path)package.json is missing

Every time I run the command expo build:android Apk I encounter an error message saying The expected package.json at (path)\package.json does not exist. Could you please help me resolve this issue? ...

reactjsreact-nativenpmbuild

Discovering the Javascript Code Executing on a <span> element with the Help of Chrome Inspector or Firebug

I have encountered a situation where a website is dynamically generating information into <span></span> tags using jQuery. The span has a class of "Price" and an id corresponding to a Product Code, with the data being pulled from a JSON data sh ...

javascripthtmlfirebuginspect

Challenges arise when transferring data retrieved from a table into a bootstrap modal window

I have been attempting to transfer values from a table into a modal. Initially, I successfully displayed the <td> values in an alert when a button was clicked on a specific row. Now, I am aiming to take it a step further by having these <td> va ...

javascriptjqueryhtmlbootstrap-4

What purpose does the Material UI Box component serve?

I've been struggling to grasp the concept explained here. The Box component functions as a versatile wrapper for various CSS utility needs. What exactly are these CSS utility needs? When should this component be used? What specific problem does it ...

reactjsmaterial-ui

The onSubmit function in Formik fails to execute if there are no input values present

I am currently working on building a form using Next.js, TypeScript, and the Formik + Yup libraries. I've encountered two scenarios: one where an input field is visible and Formik captures the value, and another where the input is not visible and the ...

reactjstypescriptformik

Detecting click events in D3 for multiple SVG elements within a single webpage

My webpage includes two SVG images inserted using D3.js. I am able to add click events to the SVGs that are directly appended to the body. However, I have encountered an issue with another "floating" div positioned above the first SVG, where I append a dif ...

javascriptjquerycssd3.jssvg