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

【问题标题】：In React, how to prevent a component's CSS import from applying to the entire app?在 React 中，如何防止组件的 CSS 导入应用到整个应用程序？
【发布时间】：2017-12-12 20:05:19
【问题描述】：

我在我的应用程序中使用facebook's create-react app：

在我的 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 文件中？

【问题讨论】：

继续阅读survivejs.com/react/advanced-techniques/styling-react
medium.com/@pioul/modular-css-with-react-61638ae9ea3e
CSS 总是适用于整个 DOM。组件本身没有body 元素，因此这种样式当然会在加载时应用于真实DOM 的body 元素。您可以为您的组件提供唯一的类名并使用该类来设置它们的样式，或者您可以使用已经建议的内联样式方法。两者都有其优点和缺点。目前有很多关于这个的讨论。
有没有办法让组件将 ID 或 Class 应用到布局？
是的，当然有。您可以通过 className prop 将类传递给任何 jsx 元素。如果你将它传递给组件，他们必须自己处理必须应用哪些 jsx 元素。

标签： css reactjs sass create-react-app

【解决方案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

【讨论】：

【解决方案2】：

最好和最简单的解决方案是为代码中的每个元素赋予类名。我在尝试对图像应用宽度和高度时遇到了同样的问题，最终发现它会影响整个应用程序。

【讨论】：