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

Question

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

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

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

It is not really clear exactly what your problem is. React does not change the way HTML and CSS works. — Deadron
– Deadron, Commented Jan 15, 2021 at 18:00
but the CSS has been differently interpreted as you can see the styling has been stricken down leaving a distorted output. — code-mon
– code-mon, Commented Jan 15, 2021 at 18:05
This could be due to a number of issues. Your CSS might be competing with other CSS files. Your toolchain may not be properly including the CSS in the produced file. You could be using a non functional CSS importer. — Deadron
– Deadron, Commented Jan 15, 2021 at 18:08
how to debug and find that out? there is no other CSS file so no competing I guess. How to determine on the other two? — code-mon
– code-mon, Commented Jan 15, 2021 at 18:14
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. — Ouroborus
– Ouroborus, Commented Jan 15, 2021 at 21:05

Ouroborus · Accepted Answer · 2021-01-16 07:58:14Z

1

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.

answered Jan 16, 2021 at 7:58

Ouroborus

17k8 gold badges42 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related