react中使用antd影响全局样式的问题

超、凢脫俗 2022-12-01 11:55 224阅读 0赞

如果在react脚手架中使用 ant design 这个UI框架的话，需要引入它的样式：

import 'antd/dist/antd.css';

不过这会影响我们index.js里面全局样式。

一般按antd的文档走是不是发现这个问题的，不过我半路出家，直接把antd的样式依赖写在index.css下面，导致我在index.css安排的全局样式被覆盖了，我也是后面才改过来的。

试了两种方法，调整包引入顺序以及重置样式包裹根组件< App />标签。

**第一种**：调整包引入顺序，将index.css按文档里面说的，放到最下面。

...
    //antd全部引入
    import moment from 'moment';
    import 'moment/locale/zh-cn';
    import 'antd/dist/antd.css';
    //把index.css最后引入
    import './index.css';
    
    moment.locale('zh-cn');
    ...

**第二种**：咱们将通过styled-components自己编写的样式引入index.js，然后包裹根组件< App />。

先写一下样式，导出：

import styled from "styled-components"
    const UlStyled = styled.div` ul{ margin:0; } `
    export {  UlStyled }

然后引入，样式包裹根组件：

...
    import { UlStyled} from "./styled/home"
    ...
    ReactDOM.render(
      <BrowserRouter>
        <React.StrictMode>
        	{ /*样式包裹*/}
    		<UlStyled> 
    			<App />
    		</UlStyled>
        </React.StrictMode>
      </BrowserRouter>,
      document.getElementById('root')
    );

发表评论取消回复

表情：

评论列表（有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

相关 react中使用antd影响全局样式的问题

如果在react脚手架中使用 ant design 这个UI框架的话，需要引入它的样式： import 'antd/dist/antd.css'; 不过这会影响我们

超、凢脫俗/ 2022年12月01日 11:55/ 0 赞/ 225 阅读

相关 react antd（ant design）前端样式修改

1、搜索栏样式 .ant-pro-table-search { background: eee !important; marg

缺乏、安全感/ 2022年11月21日 09:52/ 0 赞/ 487 阅读

相关 React Antd 中如何修改覆盖默认样式及样式引用

如何覆盖antd的默认样式 step.1 通过浏览器调试面板，找到需要修改的样式class 名如下所式 `.ant-time-picker-input` ![在这

本是古典何须时尚/ 2022年09月15日 11:49/ 0 赞/ 292 阅读

相关 React 项目记录（三）——在 React 中使用 antd

Step 1：安装antd npm i --save antd Step 2：引入文件在需要使用到 antd 的页面顶部加上 import {

川长思鸟来/ 2022年03月25日 10:16/ 0 赞/ 339 阅读

相关 react➕antd中使用switch...case...

1，使用switch...case...效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

墨蓝/ 2022年02月05日 10:34/ 0 赞/ 944 阅读

相关 react中使用AntD表单

react中使用AntD表单 1.双向数据绑定 render() { const { getFieldDecorator } = thi

àì夳堔傛蜴生んèń/ 2022年01月25日 18:13/ 0 赞/ 441 阅读

相关 react使用Antd表格

react使用Antd表格 1.表格中插入图标或者选择框需要用到columns中的render回调 columns: [ {

不念不忘少年蓝@/ 2022年01月22日 09:57/ 0 赞/ 452 阅读

相关 react中使用AntD的树形控件

参数配置 checkable：节点前添加 Checkbox 复选框 checkedKeys：就是一个数组，数组中的key与菜单中的key相同的就会显示选中状态

古城微笑少年丶/ 2022年01月22日 04:21/ 0 赞/ 1231 阅读

相关 react使用antd mobile

Ant-design框架 1. create-react-app antd 2. npm install antd-mobile --

向右看齐/ 2021年07月25日 13:29/ 0 赞/ 482 阅读

相关 element-ui样式篇：修改样式不影响全局，不影响其他组件

element-ui每个控件都自带了样式，使用时候很多时候需要修改样式，但是大多数遇到的情况是修改的样式要么不起作用，要么修改了默认样式，导致其他组件用到的地方样式都改了，如何

落日映苍穹つ/ 2021年07月24日 22:50/ 0 赞/ 1250 阅读