解决修改antd样式导致全局修改问题

找到你想修改的classname
在这里插入图片描述
全局覆盖样式:

@import '~antd/lib/style/themes/default.less';
:global {
		.ant-table {
			height: 220px;
			overflow-x: auto;
		}
}

单个独立样式:

@import '~antd/lib/style/themes/default.less';
.mytables {
	:global {
		.ant-table {
			height: 220px;
			overflow-x: auto;
		}
	}
}

也可以设置多个样式:

@import '~antd/lib/style/themes/default.less';
.mytables {
	:global {
		.ant-table table {
			text-align: center;
			margin-bottom: 15px;
		}

		.ant-table {
			height: 220px;
			overflow-x: auto;
		}

		.ant-table-thead>tr>th {
			text-align: center;
		}

		.ant-table-thead>tr,
		.ant-table-tbody>tr {
			background-color: #fff;
		}

		.ant-btn {
			font-size: 20px;
		}

		.ant-popover-inner-content {
			padding: 0;
		}

		.ant-btn,
		.ant-btn:active,
		.ant-btn:focus {
			margin-right: 40px;
		}

		.ant-col-12 {
			height: 400px;
		}
	}
}

都需引入阿里默认样式,然后只需在页面引入:

import { Button, Result } from 'antd';
import React from 'react';
import { history } from 'umi';
import styles from './index.less';

const NoFoundPage = () => (
  <Table className={styles.tablestyle} pagination={false} />
);

export default NoFoundPage;

你可能感兴趣的:(antd,css,js)