Remove global.less css from Reactjs project-CodePudding

I have using the ant-table-extensions for display the data in table . but I have facing some issues like antd automatically import some css and it is disturbing my design. How can remove it. Even I have written css code in my index.js

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family:'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
}

What is the solution for removing the global.less css ?

CodePudding user response：

I have another way to solve your problem You can use :global to reset antd's own style

:global {
  .antd-own-style {
     Your customized styles
   }
 }

https://github.com/css-modules/css-modules

CodePudding user response：

You can namespace the antd styles, I was using less in my case

I created antd.less file with // this will namespace the antd class with antdContainer

.antdContainer {
    @import '~antd/dist/antd.less';
}

import these styles in the app

import '../styles/antd.less';

Then when using antd components, wrap the components with

   <div className=" antdContainer">
   </div>

Hope it gives you some ideas to solve the problem