为什么 css 设置会泄漏到其他组件中？

Question

我有许多反应类组件，其中包含 .css 文件。示例：

import React from 'react';
import Modal from 'react-modal';
import "./Payment.css"

Modal.setAppElement('#root');

class PaymentModal extends React.Component {
...

但是这些.css 设置正在应用于其他组件。为什么 css 设置会泄漏到其他组件中？

Answer 1

唯一能阻止 CSS 样式“泄露”的是唯一的名称。 CSS 模块使用一种向类名添加一些随机字符串的技术来确保这种唯一性。从您的代码看来，您只是将一些原始 CSS 导入到您的组件中。如果是这种情况，您需要确保使用唯一的类和选择器来防止 CSS 被过度应用。使用 SASS/LESS 更容易，因为很容易将我们所有的选择器放在某个父类选择器中，例如：

    .my-modal {
        input.my-input {
           color: #fff; 
        }
    }

或者其他什么——关键是你可以嵌套你的选择器，而你不能在纯 CSS 中。

所以我的建议是要么使用 CSS 模块库，要么使用带有嵌套选择器的 SASS，或者只是小心确保你的 CSS 选择器是唯一的。