我正在为我的应用程序使用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 文件中？
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;
}
JS：
// in Link.js
import React from 'react';
import '../../styles/Link.css'
const Link = ({children, href}) => (
<a style={color: 'red'} href={href}>{children}</a>
);
有一些库试图解决样式问题：
观看此演讲：https : //speakerdeck.com/vjeux/react-css-in-js
看看这个：https : //github.com/cssinjs
样式组件：https : //github.com/styled-components/styled-components
最好和最简单的解决方案是为代码中的每个元素提供 classNames。我在尝试将宽度和高度应用于我的图像时遇到了同样的问题，最终发现它影响了整个应用程序。