CODEWITHSUNDEEP
javascripthtmlcssreactjs
code-mon
code-mon

Reputation: 71

Why the CSS of a vanilla JS project getting overwritten by React JS compiler?

I have a vanilla JS project which I tried to implement in react. The HTML/JSX of both are same and also the stylesheet are same only difference being the entire html for vanilla JS being written in a single index.html file

<body>
    <header>
      <h1>Todo app</h1>
    </header>
    <form>
      <input type="text" class="todo-input" />
      <button class="todo-button" type="submit">
        <i class="fas fa-plus-square"></i>
      </button>
      <div class="select">
        <select name="todos" class="filter-todo">
          <option value="all">All</option>
          <option value="completed">Completed</option>
          <option value="uncompleted">Uncompleted</option>
        </select>
      </div>
    </form>
    <script src="./app.js"></script>
  </body>

and for React JS they are distributed into two files the App.JS

import React from "react";
import './App.css';
//importing components
import Form from "./components/Form";

function App() {
  return (
    <div className="App">
      <header>
          <h1>Todo app</h1>
      </header>
      <Form />
    </div>
  );
}

export default App;

and a component file Form.js

import React from "react";


const Form = () =>{

    return(
        <form>
            <input type="text" className="todo-input" />
            <button className="todo-button" type="submit">
                <i className="fas fa-plus-square"></i>
            </button>
            <div className="select">
                <select name="todos" className="filter-todo">
                    <option value="all">All</option>
                    <option value="completed">Completed</option>
                    <option value="uncompleted">Uncompleted</option>
                </select>
            </div>
        </form>
    );
}

export default Form;

The relevant CSS portion

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  color: white;
  font-family: "Poppins", sans-serif;
  min-height: 100vh;
}
header {
  font-size: 2rem;
}

header,
form {
  min-height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
form input,
form button {
  padding: 0.5rem;
  font-size: 2rem;
  border: none;
  background: white;
}
form button {
  color: #ff6f47;
  background: #f7fffe;
  cursor: pointer;
  transition: all 0.3s ease;
}
form button:hover {
  background: #ff6f47;
  color: white;
}

However, the React output seems to override the CSS ReactJS Output

and doesn't interpret the CSS as in a html file for the vanilla project Expected Output

Please help me out to understand this strange behavior of React compiler.

Upvotes: 0

Views: 222

Answers (1)

Ouroborus
Ouroborus

Reputation: 16894

TL;DR: Bootstrap included in one build but not the other was the cause of the difference.

From my comment on the question:

Looks like you're loading Bootstrap (a mostly CSS framework) in the React build but not in the vanilla build. This could be because you've included it only in your react build, or because it's failing to load in your vanilla build, or something else.

And asker's response:

It seems the fontawesome icon I used suggested me to include certain links in index.html head that includes bootstrap and causes the clash. In the vanilla project no bootstrap links are used.

Upvotes: 1

Related Questions