css 如何覆盖Ant Design5中的样式?

2admgd59  于 2023-03-20  发布在  Ant Design
关注(0)|答案(1)|浏览(307)

我正在使用React(创建-React-应用程序)、ant Design 5.3.0模块化scss
当使用嵌入式组件时,它们的样式会覆盖我的样式,因为组件创建了一个 Package 器,而我的样式挂在上游 Package 器上,下游元素自己创建ant设计。
为了在scss中覆盖它们,我发现我需要在类中声明一个内联类,它生成ant设计。例如,对于Typography,它将形成. ant-typography。这里有一个BUT:如果您不使用模块化scss(不要写入head.module.css之类的文件),也没问题。如果您写入 modular scss 文件,它不会覆盖。
Head.module.scssindex.js importing module scsswhat render index.js with module scss
index.js importing plain scsswhat render index.js with plain scss(抱歉:我还没有足够的声誉张贴图像,因为新手贡献者)
我想这和kebab-case符号有关。我试着在模型文件中将符号改为camelCase,但也没有用。你能告诉我如何解决这个问题吗?

hfsqlsce

hfsqlsce1#

尝试使用

:global(.className) {
    // Set CSS Properties
}

在模块化SCSS文件中
例如:

:global(.swiper-pagination) {
    width: 100%;
}

检查该页以查找需要覆盖的类名。以下是有关“:global”的链接:What does :global (colon global) do?

相关问题