--- order: 3 title: zh-CN: 自定义面板 en-US: Custom Panel --- ## zh-CN 自定义各个面板的背景色、圆角、边距和图标。 ## en-US Customize the background, border, margin styles and icon for each panel. ```jsx import { Collapse } from 'antd'; import { CaretRightOutlined } from '@ant-design/icons'; const { Panel } = Collapse; const text = ` A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world. `; ReactDOM.render( } className="site-collapse-custom-collapse" >

{text}

{text}

{text}

, mountNode, ); ``` ```css [data-theme='compact'] .site-collapse-custom-collapse .site-collapse-custom-panel, .site-collapse-custom-collapse .site-collapse-custom-panel { margin-bottom: 24px; overflow: hidden; background: #f7f7f7; border: 0px; border-radius: 2px; } ```