How to import css for only any component in Reactjs

Question

I'm coding with small simple project of React. I have 2 components: login, register and 2 css for them: login_page, register_page. How can I import login_page for login, register_page for register without overriding the css?

Answer 1

Source - https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822

import React from 'react';
import registerCSS './register_page.css'; //stylesheet
import loginCSS './login_page.css'; //stylesheet

const DottedBox = () => (
  <div className={registerCSS.container}>
    <p className={loginCSS.content}>Get started with CSS styling</p>
  </div>
);

your CSS should be like this

:local(.container) {
   margin: 40px;
   border: 5px dashed pink;
 }
 :local(.content) {
   font-size: 15px;
   text-align: center;
 }

Example

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. Great article about css modules here.

import React from 'react';
import styles from './DashedBox.css';

const DashedBox = () => (
  <div className={styles.container}>
    <p className={styles.content}>Get started with CSS Modules style</p>
  </div>
);

export default DashedBox;

Similar to css we import css file import styles './DashedBox.css' then we access to className as we access to object

:local(.container) {
   margin: 40px;
   border: 5px dashed pink;
 }
 :local(.content) {
   font-size: 15px;
   text-align: center;
 }

:local(.className)-this when you use create-react-app because of webpack configurations .className-this if you use your own react boilerplate. To make CSS modules work with Webpack you only have to include the modules mentioned above and add the following loader to your webpack.config.js file:

. . .
{
  test: /\.css$/,
  loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
}
. . .

Answer 2

you can use react-emotion; sample code is below in this way you can use CSS as a variable. If you load CSS from the file which will overwrite other CSS

  import { css } from 'react-emotion';

    const login = css`
        display: block;
        margin: 300px auto;
        border-color: red;
        z-index: 1`;


        <Login className={login}/>


    const register  = css`
        display: block;
        margin: 300px auto;
        border-color: red;
        z-index: 1`;

        <Register className={register}/>

The package "react-emotion" has been replaced by "@emotion/styled" in version 10. See https://emotion.sh/docs/migrating-to-emotion-10 for more information on migrating.

This package exists to redirect people to the @emotion/styled package and the Emotion docs

Answer 3

If I understand your question correctly then you're asking how to import other child components in a parent component without overriding existing style of the parent component.

If you want to apply parent component styles on child component then create a CSS file import it in the parent component and write generalized CSS classes for everything that you'll need in parent and child component like bootstrap classes and use these classes in both components.

For example, you have three components Login.js,Register.js and App.js and you have a CSS file App.css.Then your App.js would look like something this

import React from 'react';
import Login from './components/Login'
import Register from './components/Register'
import './App.css'

function App() {
  return (
      <div>
         <div className="x"> some other elements</div>
         <Login />
         <Register />
      </div>
  );
}

export default App;

App.css would look like this

.x{
  properties:values;
  ...
  } 
.btn{
 properties:values;
  ...
 }
....

here x, btn and other classes would be generic class that you can use.