Question

我正在用React的一个简单项目进行编码。我有2个组件：login，register和2个CSS：login_page，register_page。如何在不覆盖CSS的情况下导入login_page进行登录，register_page进行注册？

Answer 1

您可以使用react-emotion;下面以这种方式提供了示例代码，您可以将CSS用作变量。如果您从文件中加载CSS，它将覆盖其他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}/>

在版本10中，“ react-emotion”包已由“ @ emotion / styled”替换。有关迁移的更多信息，请参见https://emotion.sh/docs/migrating-to-emotion-10。

该软件包可以将人们重定向到@ emotion / styled软件包和Emotion文档

Answer 2

来源-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>
);

您的CSS应该是这样

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

示例

CSS模块是一个CSS文件，默认情况下，所有类名称和动画名称都在本地作用域内。关于CSS模块的好文章。

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;

类似于css，我们导入css文件导入样式'./DashedBox.css' 然后我们访问className就像访问对象

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

：local（.className）-由于webpack配置而在使用create-react-app时使用的 .className-如果您使用自己的反应样板，则为this。要使CSS模块与Webpack一起使用，您只需包含上述模块并将以下加载程序添加到webpack.config.js文件中即可：

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

Answer 3

如果我正确理解了您的问题，那么您在问如何在父组件中导入其他子组件而不覆盖父组件的现有样式。

如果要在子组件上应用父组件样式，则创建一个CSS文件，将其导入到父组件中，并为父子组件中所需的所有内容（如引导程序类）编写通用CSS类，并在这两个组件中使用这些类。

例如，您有三个组件Login.js，Register.js和App.js，并且有一个CSS文件App.css。那么您的App.js看起来像这样

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看起来像这样

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

此处x，btn和其他类将是您可以使用的通用类。

如何仅为Reactjs中的任何组件导入CSS

3 个答案: