React CSS 导入

Question

在我的 Home.js 中，我有以下代码

import React from 'react';

import './Home.css';

const textVariants = {...}

const Home = () => {
  return (
    <div id='home' className='page'>
      <motion.div className='text-wrapper' variants={textVariants} initial='initial' animate='animate'>
        <motion.div className='text-container' variants={textVariants}>
          <motion.h1 variants={textVariants}>NAME</motion.h1>
          <motion.h2 variants={textVariants}>An enthusiatic university student</motion.h2>
      </motion.div>
    </div>
  );
};

export default Home;

在 Home.css 中，

.text-wrapper {
    max-width: 1366px;
    height: 100%;
}

.text-container {
    height: 100%;
    width: 50%;
    padding-left: 10%;

    h1 {
        letter-spacing: 10px;
        font-size: 50px;
        margin-bottom: -5%;
    }

    h2 {
        font-size: 80px;
    }
}

我有 About.js 和 About.css 以及以下内容，

import './About.css';

const About = () => {
  return (
    <div id='about' className='page'>
      <div className='text-container'>
        <h1>About Me</h1>
      </div>
    </div>
   );
};

但是 About.js 应用了 Home.css 中的内容，即 .text-container。我该如何避免这种情况？我不知道为什么 Home.css 被应用到 About.js 即使我没有导入它。

Answer 1

在React js中，任何根组件中导入的css文件适用于整个项目。 css 类可以在项目层次结构中的任何位置访问。 我们无法避免这种情况，因为文件被应用于根目录。您必须为不同的组件使用特定的类名称。

专业提示：创建可重用的组件，以便您可以将相同的类应用于每个相同的组件..