mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 19:19:57 +08:00
Code Issues Actions 31 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}
colSpan={span}
>
{notEmpty(label) ? label : content}
{notEmpty(label) && <span style={labelStyle}>{label}</span>}
{notEmpty(content) && <span style={contentStyle}>{content}</span>}
</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
```tsx
import { Descriptions, Divider } from 'antd';
import { Descriptions, Divider, Switch, Radio } from 'antd';
const labelStyle: React.CSSProperties = { background: 'red' };
const contentStyle: React.CSSProperties = { background: 'green' };
function renderCelledDesc(bordered?: boolean) {
return (
<Descriptions title="User Info" bordered={bordered}>
<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>
);
}
type LayoutType = 'horizontal' | 'vertical' | undefined;
const Demo = () => {
const [border, setBorder] = React.useState(true);
const [layout, setLayout] = React.useState('horizontal' as LayoutType);
function renderRootDesc(bordered?: boolean) {
return (
<Descriptions
title="Root style"
labelStyle={labelStyle}
contentStyle={contentStyle}
bordered={bordered}
>
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
<Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
<Descriptions.Item
label="Automatic Renewal"
labelStyle={{ color: 'orange' }}
contentStyle={{ color: 'blue' }}
<>
<Switch
checkedChildren="Border"
unCheckedChildren="No Border"
checked={border}
onChange={e => setBorder(e)}
/>
<Divider />
<Radio.Group onChange={e => setLayout(e.target.value)} value={layout}>
<Radio value="horizontal">horizontal</Radio>
<Radio value="vertical">vertical</Radio>
</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>
</Descriptions>
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
<Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
<Descriptions.Item
label="Automatic Renewal"
labelStyle={{ color: 'orange' }}
contentStyle={{ color: 'blue' }}
>
YES
</Descriptions.Item>
</Descriptions>
</>
);
}
};
ReactDOM.render(
<>
{renderCelledDesc()}
{renderCelledDesc(true)}
<Divider />
{renderRootDesc()}
{renderRootDesc(true)}
</>,
mountNode,
);
ReactDOM.render(<Demo />, mountNode);
```