css Question posted in
Some basic documentation can be found here.

React CSS import

In my Home.js I have the following code

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;

and in 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;
    }
}

and I have About.js and About.css with the following,

import './About.css';

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

but About.js applies what it is in Home.css which is .text-container. How do I avoid this? I am not sure why Home.css is applied to About.js even though I did not import it.

Tags:

2

Answers


  1. 0

    in React js, imported css files in any root component applies to whole project . css classes can be accessible anywhere in the project hierarchy.
    we can not avoid this because files are applied to root. you have to use specific class names for diffrent components.

    pro tip: create the components reusable so you can apply same class to every same component..

    Login or Signup to reply.
  2. 0

    You can achieve this using CSS Modules, not regular stylesheets.

    With CSS Modules, you import styles like an object, and you apply classes using the dot notation or square brackets, depending on the name of the class:

    /* Home.module.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;
    }
}

    // Home.js

import React from 'react';
import styles from './Home.module.css';

const textVariants = {...}

const Home = () => {
  return (
    <div id='home' className='page'>
      <motion.div className={styles['text-wrapper']} variants={textVariants} initial='initial' animate='animate'>
        <motion.div className={styles['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;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search