I'm coding with small simple project of React. I have 2 ponents: 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?

I'm coding with small simple project of React. I have 2 ponents: 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?

• javascript
• css
• reactjs

Share Improve this question Follow asked Aug 29, 2019 at 16:55 Huy Vu TheHuy Vu The 14122 gold badges33 silver badges1313 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Source - https://codeburst.io/4-four-ways-to-style-react-ponents-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]' 
}
. . .

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

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

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

For example, you have three ponents 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 './ponents/Login'
import Register from './ponents/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.