Fatal编程技术网
  • javascript/
  • Javascript 为什么普通JS项目的CSS会被React JS编译器覆盖？

Javascript 为什么普通JS项目的CSS会被React JS编译器覆盖？

javascript html css reactjs

Javascript 为什么普通JS项目的CSS会被React JS编译器覆盖？,javascript,html,css,reactjs,Javascript,Html,Css,Reactjs,我有一个香草JS项目，我试图在react中实现它。两者的HTML/JSX是相同的，样式表也是相同的，唯一的区别是vanilla JS的整个HTML都写在一个index.HTML文件中 <body> <header> <h1>Todo app</h1> </header> <form> <input type="text" class="tod

我有一个香草JS项目，我试图在react中实现它。两者的HTML/JSX是相同的，样式表也是相同的，唯一的区别是vanilla JS的整个HTML都写在一个index.HTML文件中

<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>
但是，React输出似乎覆盖了CSS

并且不会将CSS解释为香草项目的html文件

请帮助我理解React编译器的这种奇怪行为。

TL；DR：导致差异的原因是一个版本中包含引导，而另一个版本中没有

根据我对这个问题的评论：

看起来您正在React构建中加载引导（主要是CSS框架），而不是普通构建中。这可能是因为您只在react构建中包含了它，或者是因为无法在普通构建中加载它，或者其他原因

以及询问者的回答：

似乎我使用的图标建议我在index.html头部包含某些链接，这些链接包括引导并导致冲突。在vanilla项目中，没有使用引导链接

你的问题到底是什么还不是很清楚。React不会改变HTML和CSS的工作方式。但是CSS被不同的解释，因为您可以看到样式被破坏，导致输出失真。这可能是由于一些问题造成的。您的CSS可能与其他CSS文件竞争。您的工具链可能没有正确地将CSS包含在生成的文件中。您可能正在使用一个不起作用的CSS导入器。如何调试并找到它？没有其他CSS文件，所以我想没有竞争对手。如何确定其他两个？看起来您正在React构建中加载引导（主要是CSS框架），而不是普通构建中。这可能是因为您只在react构建中包含了它，或者是因为无法在普通构建中加载它，或者其他原因。 
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;

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;

* {
  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;
}