ant-design/components/table/style/radius.ts
afc163 3a5413315d
style: fix Table border and radius issues (#41985)
* style: fix Table border details

* style: fix Table border details
2023-04-25 23:17:20 +08:00

55 lines
1.6 KiB
TypeScript

import type { CSSObject } from '@ant-design/cssinjs';
import type { GenerateStyle } from '../../theme/internal';
import type { TableToken } from './index';
const genRadiusStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
const { componentCls, tableRadius } = token;
return {
[`${componentCls}-wrapper`]: {
[componentCls]: {
// https://github.com/ant-design/ant-design/issues/39115#issuecomment-1362314574
[`${componentCls}-title, ${componentCls}-header`]: {
borderRadius: `${tableRadius}px ${tableRadius}px 0 0`,
},
[`${componentCls}-title + ${componentCls}-container`]: {
borderStartStartRadius: 0,
borderStartEndRadius: 0,
// https://github.com/ant-design/ant-design/issues/41975
[`${componentCls}-header, table`]: {
borderRadius: 0,
},
'table > thead > tr:first-child': {
'th:first-child, th:last-child, td:first-child, td:last-child': {
borderRadius: 0,
},
},
},
'&-container': {
borderStartStartRadius: tableRadius,
borderStartEndRadius: tableRadius,
'table > thead > tr:first-child': {
'> *:first-child': {
borderStartStartRadius: tableRadius,
},
'> *:last-child': {
borderStartEndRadius: tableRadius,
},
},
},
'&-footer': {
borderRadius: `0 0 ${tableRadius}px ${tableRadius}px`,
},
},
},
};
};
export default genRadiusStyle;