在 React 中，如何防止组件的 CSS 导入应用于整个应用程序？

Question

我正在为我的应用程序使用facebook 的 create-react 应用程序：

在我的 Login.js 容器中，我像这样导入 CSS：

import React from 'react';
import '../../styles/users/Login.css'
const Login = () => {
....

问题是 Login.css 样式被应用于我的整个应用程序......例如，如果 Login.css 有：

body {
    background:Red ;
}

整个应用程序将有一个背景主体：红色；即使在登录容器之外。

我期望/想要的是容器内的 CSS 导入仅适用于该特定容器。

React 可能吗？React 开发人员应该如何处理容器特定的样式？我是否需要为所有容器添加一个 ID 并将其包含在整个 CSS 文件中？

Answer 1

1. 解决方案：为 DOM 元素提供类名称，以便在 css 中使用它们。

JS：

// in Link.js

import React from 'react';

import '../../styles/Link.css'

const Link = ({children, href}) => (
   <a className="link" href={href}>{children}</a>
);

CSS：

// Link.css

.link {
    color: red;
}

2.解决方案：内联样式。

JS：

// in Link.js

import React from 'react';

import '../../styles/Link.css'

const Link = ({children, href}) => (
   <a style={color: 'red'} href={href}>{children}</a>
);

3.解决方案：JS中的CSS。

有一些库试图解决样式问题：

观看此演讲：https://speakerdeck.com/vjeux/react-css-in-js

看看这个：https: //github.com/cssinjs

样式组件： https: //github.com/styled-components/styled-components