小编Nim*_*der的帖子

这是我的App.js代码

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import AOS from "aos";
import "aos/dist/aos.css";
import Home from "../Home/Home";
AOS.init();

function App() {
  return (
    <>
      <div className="App">
        <Router>
          <Route path="/">
            <Home />
          </Route>
        </Router>
      </div>
    </>
  );
}

export default App;

导出默认应用程序；

首页.jsx

import React from "react";

export default function Home() {
  return (
    <>
      <div className="commitments">
        <p data-aos="fade-left">This is text fading</p>
      </div>
    </>
  );
}

我认为这是正确的方法，在使用 data-aos="fade-left" 之前它工作正常，但是当我使用 data-aos 时文本消失了。我不明白这是什么问题。

因为我在不同的组件中使用相同的代码集。这是我的代码结构。

我想使用Sass 变量和 mixin，这样我就不必在不同的文件中多次重复相同的代码。这是我的变量文件。而且我不知道如何在组件的不同文件中使用这些颜色。

并且有很多按钮使用相同的 css。如何创建一个 mixin 并在不同的地方使用它。