如何将css应用到一个特定的组件上?

问题描述 投票:0回答:1

如何将css应用到一个特定的组件上?

例如:在App.js中,我在路由中加入了Login、Register组件。

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

现在在Login组件中导入的css也被应用到Register组件中。

如何解决这个问题?

css reactjs react-router
1个回答
2
投票

你做得很好,因为你告诉你已经导入了两个。LoginRegister 中的组成部分 AppReact 功能组件。

两个月前,当我开始在React组件中使用CSS时,这是我之前卡住的问题。

在React组件中使用 CSS Modules 不同版本的 React.

如果你用 creat-react-app version >= V2,你只需要使用 CSS模块请按照说明进行安装。


1
投票

在你的webpack配置中

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

1
投票

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

  1. 你可以有多个css文件,比如login.css,并且有该文件的特定类。

  2. 类名在 index.css 并在所需的地方使用这些类,如果你有很多组件,并且你想让你的应用程序在所有页面上看起来都是一样的样式,那么它将会非常有用。

  3. 如果你不重用样式,那就没有必要创建一个 css 文件并导入它。只要声明一个 styleConst 是一个样式的对象,你可以直接使用它像 <div style={styleConst} />

© www.soinside.com 2019 - 2024. All rights reserved.