如何将css应用到一个特定的组件上?
例如:在App.js中,我在路由中加入了Login、Register组件。
在Login.css中,我添加了一些css并导入到Login.js中。
现在在Login组件中导入的css也被应用到Register组件中。
如何解决这个问题?
你做得很好,因为你告诉你已经导入了两个。Login
和 Register
中的组成部分 App
根 React
功能组件。
两个月前,当我开始在React组件中使用CSS时,这是我之前卡住的问题。
在React组件中使用 CSS Modules
不同版本的 React
.
如果你用 creat-react-app
version >= V2
,你只需要使用 CSS模块请按照说明进行安装。
在你的webpack配置中
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: 'css-loader',
options: {
modules: {
localIdentName: '[local]___[hash:base64:5]',
},
},
},
],
},
};
有很多方法可以将样式应用到你的组件中。
你可以有多个css文件,比如login.css,并且有该文件的特定类。
类名在 index.css
并在所需的地方使用这些类,如果你有很多组件,并且你想让你的应用程序在所有页面上看起来都是一样的样式,那么它将会非常有用。
如果你不重用样式,那就没有必要创建一个 css
文件并导入它。只要声明一个 styleConst
是一个样式的对象,你可以直接使用它像 <div style={styleConst} />