ant design 引入别人的代码的时候，全局样式被修改，阻止全局css污染的方法。

最新推荐文章于 2024-10-15 10:48:09 发布
最新推荐文章于 2024-10-15 10:48:09 发布
阅读量1.5k 收藏
点赞数
分类专栏： 前端 文章标签： reactjs antd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/runrun117/article/details/118296275
版权

ant design 在任何地方引入样式的时候，只要classname与整个项目antd默认的类名一致的时候，就会覆盖整个项目的antd的默认样式。

1、可以自己再编写less，重新定义改变的class样式，进行反覆盖。

2、将引入别人的代码的css文件，或者less文件删除，就不会覆盖整个样式了

runrun117
关注
专栏目录
react 关于自定义样式引入和ant-design样式引入配置问题
02-22
- **普通CSS引入**：对于全局样式或第三方库（如Ant Design）的样式，我们通常直接引入全局CSS文件，因为这些库的样式设计为全局生效，用于提供一致的设计风格。 2. **Webpack配置** Webpack是React项目常用的...
React项目中Bootstrap的全局样式污染
qq309648008的博客
01-19 716
React项目中Bootstrap的全局样式污染 在写GuGu_Simple_Upload项目时，发现了自己的a标签样式与Ant官网上的展示效果不一样… 官网上的样式： 我的样式： 赶紧打开浏览器控制台查看是哪里的CSS代码作用的，一看，好家伙，代码来自bootstrap… 这个bootstrap是在…我想起来了… 因为我觉得自己的设计水平可提升的程度不要太高，而且也对CSS不熟练，要是自己写个登录页面肯定又累又丑… 还不如去网上找个模板好看的，copy过来改改就完事… 网上的登录模板是用了boo
vue项目设置全局字体样式font-family
热门推荐
海贼王某人的博客
02-05 3万+
直接在app.vue文件中加上一下代码即可，这是我收集的比较全的字体样式，从第一个向后找，系统有就默认显示第一个，依次往后找： <style lang="scss"> body { font-family:”Microsoft YaHei”,Arial,Helvetica,sans-serif,”宋体”; } </style> 你学废了吗！ ...
antd样式修改如何避免被全局覆盖
catalike的博客
11-24 2810
antd样式修改如何避免被全局覆盖 一般的antd组件只需要在外层套一个div，引入的时候用 import styles from './ChoiceContents.less'; 然后元素的classname用： <div className={styles.choiceContentsParent}> <Swiper> </Swiper> </div> 这样的形式就可以了 在less样式文件中，antd组件要写在global里，然后global外面再
css样式防止全局污染正确做法！
m0_72642533的博客
02-03 2193
css样式防止全局污染
如何避免样式全局污染
Akukudeteng的博客
11-05 1276
代码： index.js <Table className ={styles.benchtable} </Table> index.less .benchtable{ :global(.ant-table-thead> tr >th){ color:royalblue; text-align:center } }
详解Ant Design of React的安装和使用方法
12-09
- 如果全局引入Ant Design，可能会导致浏览器控制台出现警告，提示未使用到的CSS被加载，这通常是因为引入了全部组件的样式，而实际上应用中并未用到所有组件。 Ant Design of React提供了丰富的UI组件，如Button、...
nuxt案例全局CSS丢失的那部分样式hover.css
10-29
最近在学nuxt 然后边看案例边敲代码,结果发现nuxt官方案例有个Bug 在 CSS全局案例那里，少给了一个样式 hover.css,来吧，我做个雷锋，拿去吧
ant design vue 的 description组件中 label 默认样式的更改.pdf
12-16
需要注意的是，当使用内联样式或自定义CSS类时，确保这些样式只应用于需要修改的特定`label`，避免全局样式冲突。同时，为了保持代码的可维护性和可扩展性，建议尽量减少内联样式，优先考虑使用CSS类进行样式定制。
react css 修改复写antd组件样式,而且不污染全局
qq_42339350的博客
02-09 5637
方法 比如说我想删掉antd Input.Search 的左边框 从页面上找到要修改的位置，页面上修改后确定是这个样式名 利用:global css中写法 :global(.ant-input-search-icon:before){ border-left: initial; } scss或者less中写法 scss自带嵌套比较方便 :global{ .ant-input-search-icon:before{ border-left:
react中使用antd影响全局样式的问题
weixin_43297321的博客
08-26 2380
如果在react脚手架中使用 ant design 这个UI框架的话，需要引入它的样式： import 'antd/dist/antd.css'; 不过这会影响我们index.js里面全局样式。 一般按antd的文档走是不是发现这个问题的，不过我半路出家，直接把antd的样式依赖写在index.css下面，导致我在index.css安排的全局样式被覆盖了，我也是后面才改过来的。 试了两种方法，调整包引入顺序以及重置样式包裹根组件< App />标签。 第一种：调整包引入顺序，将index.cs
ant-design-vue 全局和局部引入组件
yemuxia_sinian的博客
03-14 7871
1、全局引入，在main.js里面引入 import Vue from "vue"; import 'ant-design-vue/dist/antd.css'; import Antd from "ant-design-vue"; Vue.use(Antd) html使用： <template> <div class="page-wrap"> <a-anchor> <a-anchor-link href="#a" title="a
antD使用二三事-设置主题色 && 不同组件间对antD的样式修改互不干扰
MingleHDU的博客
07-05 3020
设置主题色 前期准备： npm install babel-plugin-import --save-dev npm install antd --save 1. webpack.config.theme.js中，设置主题色primary-color，并导出 module.exports={ "primary-color": "#0ba29a", "link-color": "...
Ant Design css样式无法修改? 一招教你解决~
m0_49789433的博客
04-29 1113
想要修改他的背景颜色 加 !important也无济于事 ant-tabs-ink-bar{ background-color:#fff !important ; } 最外层div添加 ref 里面的内容添加 :getContainer="()=>$refs.main" 此处main 和上面的ref里面的内容要一样哦 css使用 .main 里面也要写这个 ::v-deep 才可以生效哦 <style lang="less" scoped> .main{ ..
在react中修改antd组件样式导致css污染
最新发布
m0_63710734的博客
10-15 115
如果我们的需求只是在当前页面修改组件样式，这时就使用局部修改样式；不然使用全部修改样式的话，当你打开当前页面后，再打开另外一个具有相同组件的页面时，另外一个页面的组件样式会收到影响。在日常开发中antd的组件自带样式并不能很好的符合我们的需求，这时候我们就需要自定义修改antd组件的样式；在修改组件样式的时候我们要区分好全局修改和局部修改，稍有不慎会导致css全局污染；在react中修改antd组件样式我们是使用:global样式穿透。在需要修改的组件样式外加上一层具体的选择器。
关于CSS Modules全局污染解决
让优秀成为一种习惯
03-16 6433
主要说明在使用标签元素设置样式使用CSS Modules全局污染的解决方案。
如何优雅地彻底解决 antd 全局样式问题
mengfanyue123的博客
05-17 1399
module里边增加特定的classname重新覆盖回去 ，这边推荐使用module样式编写代码，因为外边会增加一层隔离classname哈希值，不容易被覆盖和影响。总结：更改antd全局的样式，一定一定要加classname做一个隔离，不然会出现不可思议的样式问题，覆盖来覆盖去，全局样式会被污染，切记切记！首先可以给自己组建的的body添加一层classname名字。1.提高子组件的样式权重 或者降低父组件的样式权重。2.增加特定的classname名字 增加样式隔离。首先 明确完冲突后解决方案有两个。
【Less】全局样式重复注入问题
iuukai
02-02 1843
编译时 less、scss、sass、css 样式重复注入解决方法
【前端】保证css样式不被污染
愿历尽千帆，仍保持最初的热爱，奔赴每一场山海，一如既往鲜活而明亮~
07-13 2181
前言   在前端开发中，如何保证一个页面的样式不污染其他页面的样式呢？以Vue举例，我们会用到scoped属性。 什么是scoped   在Vue的style中，有一个scoped属性，表明它的css样式只作用于当前的页面，如果每一个页面的style都加上了scoped，那就相当于实现了样式的私有模块化。 使用背景   在大米订餐的开发中，我们使用了Vue的前端框架，引用了iview的第三方组件，...
Ant Design Pro如何全局引入
04-05
Ant Design Pro可以通过以下步骤进行全局引入： 1. 在你的项目中安装Ant Design Pro，可以使用npm或yarn，例如： ``` npm install antd-pro --save ``` 2. 在你的项目根目录中创建一个`src`文件夹。 3. 在`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值