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

Posted 2023-03-06

技术标签:

【中文标题】在 React 中，如何防止组件的 CSS 导入应用到整个应用程序？【英文标题】：In React, how to prevent a component's CSS import from applying to the entire app? 【发布时间】：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 元素。 【参考方案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>
);