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

Question

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

Answer 1

来源 - 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 文件 import styles './DashedBox.css' 然后我们在访问对象时访问 className

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

:local(.className)-this 当你使用 create-react-app 因为 webpack 配置 .className-this 如果您使用自己的反应样板。 要使 CSS 模块与 Webpack 一起使用，您只需包含上述模块并将以下加载器添加到您的 webpack.config.js 文件中：

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

Answer 2

你可以使用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}/>

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

这个包的存在是为了将人们重定向到 @emotion/styled 包和 Emotion 文档

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 和其他类将是您可以使用的通用类。