如何将 css 应用于特定组件？答案

【问题标题】：How to apply css to a specific component?如何将 css 应用于特定组件？
【发布时间】：2020-08-16 19:48:41
【问题描述】：

如何将 css 应用到特定组件？

例如：在 App.js 中，我包括了登录，为路由注册组件。

在 Login.css 中我添加了一些 css 并在 Login.js 中导入。

现在登录组件中导入的css也适用于注册组件。

如何解决这个问题？

【问题讨论】：

如果可能，请向您显示注册和登录组件代码
你可以在这里查看stackblitz.com/edit/react-loginlogout

标签： css reactjs react-router

【解决方案1】：

你做得很好，正如你所说，你已经在 App root React 功能组件中导入了 Login 和 Register 组件。

这是我在两个月前开始在 React 组件中使用 CSS 时遇到的问题。

CSS Modules 的使用因React 的一个版本而异。

如果您使用creat-react-app version >= V2 引导您的项目，您只需使用CSS Modules，它就会像魅力一样工作。请按照说明进行安装。

【讨论】：

【解决方案2】：

在你的 webpack 配置中

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: 'css-loader',
        options: {
          modules: {
            localIdentName: '[local]___[hash:base64:5]',
          },
        },
      },
    ],
  },
};

【讨论】：

我没用过 webpack。不使用 webpack 的任何其他建议？
你是通过create-react-app创建的项目吗？如果是，您可以运行“npm runeject”，webpack 配置将在 config 文件夹中

【解决方案3】：

有很多方法可以将样式应用到您的组件。

您可以拥有多个 css 文件，例如 login.css，并且具有该文件的特定类。
index.css 中的类名称并在需要的地方使用这些类，如果您有很多组件并且希望使您的应用在所有页面上看起来都具有相同的样式，这将非常有帮助。
如果您不重复使用样式，则创建css 文件并导入它是没有意义的。只需声明一个styleConst，它是一个样式对象，你可以像<div style={styleConst} />一样直接使用它

【讨论】：