Question

如何将CSS应用于特定组件？

例如：在App.js中，我包括“登录”，“注册路线组件”。

在Login.css中，我添加了一些CSS，并将其导入到Login.js中。

现在在“登录”组件中导入的css也将在“注册”组件中应用。

如何解决此问题？

Answer 1

您做得很好，正如您所言，您已经将Login和Register组件都导入了App根React功能组件中。

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

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

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

Answer 2

在您的Webpack配置中

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

Answer 3

有很多方法可以将样式应用于组件。

您可以有多个css文件，例如login.css，并且具有该文件的特定类。

index.css

类名，并在需要的位置使用该类，如果您有很多组件并且希望使您的应用在所有页面上具有相同样式，将非常有帮助。
如果您不重新使用样式，则没有必要创建css文件并将其导入。只需声明一个styleConst样式对象，您就可以像<div style={styleConst} />

如何将CSS应用于特定组件？

3 个答案: