Reactjs react中的部分css出现在整个应用程序中

我在react中有一个名为

ContentPage

的组件

该组件有自己的css，名为

ContentPage.css

很明显，我正在将它导入

ContentPage.js

中，css只在这个组件中导入

据我所知，它的样式应该只应用于

ContentPage

组件。相反，

ContentPage.css

中的样式在应用程序中的非相关组件中可见

如何仅在此组件中应用样式

以下是css：

@import '../../../Variables.scss';
@import '../../../Mixins.scss';

table {
    @include table-border;

    tr {
        @include table-border;


        td, th { 
            @include table-border;

            width: 15%; 
            padding: 2%;

            &:first-child { width: 15%; }
            &:last-child { width: 60%; }
        }
    }
}

以及组件导入：

import React from 'react';
import './Styles/ContentPage.css';

---

当您在编译/构建时导入一个.css组件时，它将创建一个bundle.css文件，供您的应用程序使用

如果您只想为您的组件提供样式表，您必须这样做：

import React from 'react';

const divStyle = {
  margin: '40px',
  border: '5px solid pink'
};
const pStyle = {
  fontSize: '15px',
  textAlign: 'center'
};

const Box = () => (
  <div style={divStyle}>
    <p style={pStyle}>Get started with inline style</p>
  </div>
);

export default Box;

从“React”导入React；
常量divStyle={
保证金：“40px”，
边框：“5px纯红”
};
常数pStyle={
fontSize:'15px'，
textAlign:“中心”
};
常量框=（）=>(
开始使用内联样式
);
导出默认框；

您可以更改网页包配置，以确保css成为组件级

查看webpack何时绑定您的CSS文件并将其添加到单个CSS文件中，或者如果您使用的是样式加载器，则将其添加到您的标题中。由于CSS对您的组件一无所知，因此我们需要确保您为组件设置的CSS类仅适用于您的组件

那么我们如何做到这一点呢

我们在类名中附加一个散列或一些唯一值，以确保Header.css中定义的wrapper类不同于Navbar.css中的wrapper

我们这样做的方式是：

在您正在测试css的网页配置文件中，您可能只是添加了css加载程序，如下所示：

test: /\.(s?)css$/,
use: [
  'style-loader',
  'css-loader',
 ]

test: /\.(s?)css$/,
use: [
  'style-loader',
  {
   loader: 'css-loader',
   options: {
            importLoaders: 1,
            modules: true,
            localIdentName: '[name]__[local]__[hash:base64:5]',
     },
  }

将其更改为：

test: /\.(s?)css$/,
use: [
  'style-loader',
  'css-loader',
 ]

test: /\.(s?)css$/,
use: [
  'style-loader',
  {
   loader: 'css-loader',
   options: {
            importLoaders: 1,
            modules: true,
            localIdentName: '[name]__[local]__[hash:base64:5]',
     },
  }

此处modules:true将告诉webpack将每个css/scss文件视为一个模块，以确保它添加哈希。

---

localIdentName:“[name]\uuuuu[local]\uuuuuuu[hash:base64:5]”，将给出哈希的格式，否则wepack将给出自己的哈希并替换您的类名。

您是否使用

创建react app

创建了应用程序？如果是，则

create react app

没有您所说的CSS模块支持。你必须配置你的构建过程来添加它support@nickornotto你说的“部分CSS”是什么意思？您想确信您的样式不会被其他组件使用吗？然后使用CSS模块。是否要使用组件单独打包样式？在这种情况下，您需要使用JSS，查看样式化组件。什么是webpack？我在app@abhay中没有这样的配置文件，我的意思是我可以看到webpack模块，但无论如何都看不到webpack.config创建另一个webpack配置文件，并在脚本中运行webpack，其中config指向上述文件。当CSS被连接时，还可以添加一个类，而不是以元素为目标。