Reactjs Nextjs-Global.css样式不应用/处理页面/组件

我是新来的

nextjs

我在

style/globals.css

中有一个

css

类：

.section-sidebar-filter-name {
  margin: 0 0 .5rem;
}

我在

pages/_app.js

中有

import

语句：

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
...

};

但是当我在chrome浏览器开发者模式下查看时，

CSS

类样式不应用于

页面中的
react组件
（
示例：test.js page
）：

有人知道我做错了什么吗？
您需要使用以下代码在pages目录（_app.js）中创建一个文件：-

export default function App({ Component, pageProps }) {
 return <Component {...pageProps} />    
}    

最后，打开pages/_app.js add导入CSS文件，如下所示：

import '../styles/global.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}    

import'../styles/global.css'
导出默认函数App（{Component，pageProps}）{
返回
}    
您确定要导出函数MyApp吗？您好，我发现
global.css
（示例：
节边栏筛选器名称
）中的css类现在的格式是
[folder]\u节边栏筛选器名称--[hash:base64:5]
，这就是为什么不应用css的原因，是否有方法仅从
localIdentName:'[folder]\uuuu[local]-[hash:base64:5].
规则中排除
global.css
文件？
export default function App({ Component, pageProps }) {
 return <Component {...pageProps} />    
}    

html,
body {
 padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
  }    

* {
  box-sizing: border-box;
}

   a {
 color: #0070f3;
 text-decoration: none;
  }

a:hover {
 text-decoration: underline;
   }

 img {
 max-width: 100%;
 display: block;
}    

import '../styles/global.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}