mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

fix: Descriptions labelStyle unsuccessful (#29942)

Browse Source 
* fix: Descriptions labelStyle unsuccessful

* use hook

* Update components/descriptions/demo/style.md

* fix lint

* fix ts
This commit is contained in:
xrkffgg 2021-03-30 17:38:50 +08:00 committed by GitHub
parent 8e885a7e08
commit 7f15e7f38e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 405 additions and 345 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/descriptions/Cell.tsx
View File

@ -47,7 +47,8 @@ const Cell: React.FC<CellProps> = ({
style={style} style={style}
colSpan={span} colSpan={span}
> >
{notEmpty(label) ? label : content} {notEmpty(label) && <span style={labelStyle}>{label}</span>}
{notEmpty(content) && <span style={contentStyle}>{content}</span>}
</Component> </Component>
); );
} }

660
components/descriptions/__tests__/__snapshots__/demo.test.js.snap
View File

File diff suppressed because it is too large Load Diff

87
components/descriptions/demo/style.md
View File

@ -15,54 +15,59 @@ debug: true
Customize label & wrapper style Customize label & wrapper style
```tsx ```tsx
import { Descriptions, Divider } from 'antd'; import { Descriptions, Divider, Switch, Radio } from 'antd';
const labelStyle: React.CSSProperties = { background: 'red' }; const labelStyle: React.CSSProperties = { background: 'red' };
const contentStyle: React.CSSProperties = { background: 'green' }; const contentStyle: React.CSSProperties = { background: 'green' };
function renderCelledDesc(bordered?: boolean) { type LayoutType = 'horizontal' | 'vertical' | undefined;
return (
<Descriptions title="User Info" bordered={bordered}> const Demo = () => {
<Descriptions.Item label="Product" labelStyle={labelStyle} contentStyle={contentStyle}> const [border, setBorder] = React.useState(true);
Cloud Database const [layout, setLayout] = React.useState('horizontal' as LayoutType);
</Descriptions.Item>
<Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
<Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
</Descriptions>
);
}
function renderRootDesc(bordered?: boolean) {
return ( return (
<Descriptions <>
title="Root style" <Switch
labelStyle={labelStyle} checkedChildren="Border"
contentStyle={contentStyle} unCheckedChildren="No Border"
bordered={bordered} checked={border}
> onChange={e => setBorder(e)}
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item> />
<Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item> <Divider />
<Descriptions.Item <Radio.Group onChange={e => setLayout(e.target.value)} value={layout}>
label="Automatic Renewal" <Radio value="horizontal">horizontal</Radio>
labelStyle={{ color: 'orange' }} <Radio value="vertical">vertical</Radio>
contentStyle={{ color: 'blue' }} </Radio.Group>
<Divider />
<Descriptions title="User Info" bordered={border} layout={layout}>
<Descriptions.Item label="Product" labelStyle={labelStyle} contentStyle={contentStyle}>
Cloud Database
</Descriptions.Item>
<Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
<Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
</Descriptions>
<Divider />
<Descriptions
title="Root style"
labelStyle={labelStyle}
contentStyle={contentStyle}
bordered={border}
layout={layout}
> >
YES <Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
</Descriptions.Item> <Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
</Descriptions> <Descriptions.Item
label="Automatic Renewal"
labelStyle={{ color: 'orange' }}
contentStyle={{ color: 'blue' }}
>
YES
</Descriptions.Item>
</Descriptions>
</>
); );
} };
ReactDOM.render( ReactDOM.render(<Demo />, mountNode);
<>
{renderCelledDesc()}
{renderCelledDesc(true)}
<Divider />
{renderRootDesc()}
{renderRootDesc(true)}
</>,
mountNode,
);
``` ```