来源 - 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 module是一个 CSS 文件，其中默认情况下所有类名和动画名都在本地范围内。关于 css module的好文章在这里。

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)-this 当你使用 create-react-app 因为 webpack 配置 .className-this 如果你使用你自己的 React 样板。要使 CSS module与 Webpack 一起使用，您只需包含上述module并将以下加载器添加到您的 webpack.config.js 文件中：

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

你可以使用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 文档

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

如果您想在子组件上应用父组件样式，则创建一个 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和其它类是一般类，您可以使用。