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

最新推荐文章于 2023-05-17 14:27:11 发布
最新推荐文章于 2023-05-17 14:27:11 发布
阅读量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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React项目中Bootstrap的全局样式污染
qq309648008的博客
01-19 678
React项目中Bootstrap的全局样式污染 在写GuGu_Simple_Upload项目时，发现了自己的a标签样式与Ant官网上的展示效果不一样… 官网上的样式： 我的样式： 赶紧打开浏览器控制台查看是哪里的CSS代码作用的，一看，好家伙，代码来自bootstrap… 这个bootstrap是在…我想起来了… 因为我觉得自己的设计水平可提升的程度不要太高，而且也对CSS不熟练，要是自己写个登录页面肯定又累又丑… 还不如去网上找个模板好看的，copy过来改改就完事… 网上的登录模板是用了boo
react 关于自定义样式引入和ant-design样式引入配置问题
02-22
- **普通CSS引入**：对于全局样式或第三方库（如Ant Design）的样式，我们通常直接引入全局CSS文件，因为这些库的样式设计为全局生效，用于提供一致的设计风格。 2. **Webpack配置** Webpack是React项目常用的...
vue项目设置全局字体样式font-family
热门推荐
海贼王某人的博客
02-05 2万+
直接在app.vue文件中加上一下代码即可，这是我收集的比较全的字体样式，从第一个向后找，系统有就默认显示第一个，依次往后找： <style lang="scss"> body { font-family:”Microsoft YaHei”,Arial,Helvetica,sans-serif,”宋体”; } </style> 你学废了吗！ ...
antd样式修改如何避免被全局覆盖
catalike的博客
11-24 2685
antd样式修改如何避免被全局覆盖 一般的antd组件只需要在外层套一个div，引入的时候用 import styles from './ChoiceContents.less'; 然后元素的classname用： <div className={styles.choiceContentsParent}> <Swiper> </Swiper> </div> 这样的形式就可以了 在less样式文件中，antd组件要写在global里，然后global外面再
如何避免样式全局污染
Akukudeteng的博客
11-05 1189
代码： index.js <Table className ={styles.benchtable} </Table> index.less .benchtable{ :global(.ant-table-thead> tr >th){ color:royalblue; text-align:center } }
react css 修改复写antd组件样式,而且不污染全局
qq_42339350的博客
02-09 5191
方法 比如说我想删掉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:
nuxt案例全局CSS丢失的那部分样式hover.css
10-29
最近在学nuxt 然后边看案例边敲代码,结果发现nuxt官方案例有个Bug 在 CSS全局案例那里，少给了一个样式 hover.css,来吧，我做个雷锋，拿去吧
详解Ant Design of React的安装和使用方法
12-09
- 如果全局引入Ant Design，可能会导致浏览器控制台出现警告，提示未使用到的CSS被加载，这通常是因为引入了全部组件的样式，而实际上应用中并未用到所有组件。 Ant Design of React提供了丰富的UI组件，如Button、...
ant design vue 的 description组件中 label 默认样式的更改.pdf
12-16
需要注意的是，当使用内联样式或自定义CSS类时，确保这些样式只应用于需要修改的特定`label`，避免全局样式冲突。同时，为了保持代码的可维护性和可扩展性，建议尽量减少内联样式，优先考虑使用CSS类进行样式定制。
ant-design-vue 全局和局部引入组件
yemuxia_sinian的博客
03-14 7340
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
关于CSS Modules全局污染解决
让优秀成为一种习惯
03-16 6374
主要说明在使用标签元素设置样式使用CSS Modules全局污染的解决方案。
antD使用二三事-设置主题色 && 不同组件间对antD的样式修改互不干扰
MingleHDU的博客
07-05 2932
设置主题色 前期准备： 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 1059
想要修改他的背景颜色 加 !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{ ..
如何优雅地彻底解决 antd 全局样式问题
最新发布
mengfanyue123的博客
05-17 1275
module里边增加特定的classname重新覆盖回去 ，这边推荐使用module样式编写代码，因为外边会增加一层隔离classname哈希值，不容易被覆盖和影响。总结：更改antd全局的样式，一定一定要加classname做一个隔离，不然会出现不可思议的样式问题，覆盖来覆盖去，全局样式会被污染，切记切记！首先可以给自己组建的的body添加一层classname名字。1.提高子组件的样式权重 或者降低父组件的样式权重。2.增加特定的classname名字 增加样式隔离。首先 明确完冲突后解决方案有两个。
css样式防止全局污染正确做法！
m0_72642533的博客
02-03 2039
css样式防止全局污染
【Less】全局样式重复注入问题
iuukai
02-02 1608
编译时 less、scss、sass、css 样式重复注入解决方法
【前端】保证css样式不被污染
愿历尽千帆，仍保持最初的热爱，奔赴每一场山海，一如既往鲜活而明亮~
07-13 2116
前言   在前端开发中，如何保证一个页面的样式不污染其他页面的样式呢？以Vue举例，我们会用到scoped属性。 什么是scoped   在Vue的style中，有一个scoped属性，表明它的css样式只作用于当前的页面，如果每一个页面的style都加上了scoped，那就相当于实现了样式的私有模块化。 使用背景   在大米订餐的开发中，我们使用了Vue的前端框架，引用了iview的第三方组件，...
如何处理前端打包后样式污染问题
x_XDGS的博客
05-11 1482
如何处理前端打包后样式污染问题 我们在进行前端开发的时候，会用到各种各样的UI库，比如vue的element-UI库，react的antd库，又比如说是Vant库，在使用这些库的时候，难免会自定义一些样式，又或者说是修改一些样式。在之前的文章中我也说了如何自定义或者修改UI库的样式：https://editor.csdn.net/md/?articleId=113928529。 但是这样修改的话，打包过后会有样式污染。 我们先来说一说css打包机制吧 css打包机制是这样的 1.通过npm run buil
vue项目中样式污染的解决办法
lld20的博客
05-11 2688
关于vue项目中样式污染的解决办法有两种只不过第二种要在第一种的基础上使用 1.css方法 通过在style 中加上 <style scoped> 2.less 的用法 依赖一个插件 sass-loader 和第一个组合的用 2.1首先要下载相对于的插件 他有两个插件要同时使用 在终端输入 npm install sass-loader@"^10.2.1" --save npm install node-sass@"^4.14.1" --save 在style中直接使用
Ant Design Pro如何全局引入
04-05
Ant Design Pro可以通过以下步骤进行全局引入： 1. 在你的项目中安装Ant Design Pro，可以使用npm或yarn，例如： ``` npm install antd-pro --save ``` 2. 在你的项目根目录中创建一个`src`文件夹。 3. 在`src`文件夹中创建一个`app.js`或`app.jsx`文件。 4. 在`app.js`或`app.jsx`文件中引入Ant Design Pro的全局样式和组件库： ```javascript import { Button } from 'antd'; import 'antd/dist/antd.css'; import './index.less'; ``` 5. 在你的项目入口文件（例如`index.js`或`index.jsx`）中引入`app.js`或`app.jsx`文件： ```javascript import App from './src/app'; ReactDOM.render(<App />, document.getElementById('root')); ``` 6. 运行你的项目，Ant Design Pro的全局样式和组件库会被自动加载。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值