ant-design/components/config-provider/demo/prefixCls.md

975 B

order title debug
99
zh-CN en-US
前缀 prefixCls
true

zh-CN

修改组件和图标前缀。

en-US

Config component and icon prefixCls.

import { ConfigProvider, Select, Button } from 'antd';
import { SmileOutlined } from '@ant-design/icons';
import React, { useState } from 'react';

// Ant Design site use `es` module for view
// but do not replace related lib `lib` with `es`
// which do not show correct in site.
// We may need do convert in site also.
const FormSizeDemo = () => {
  const [prefixCls, setPrefixCls] = useState('light');
  return (
    <div>
      <Button style={{ marginBottom: '12px' }} type="primary" onClick={() => setPrefixCls('dark')}>
        toggle prefixCls
      </Button>
      <div>
        <ConfigProvider prefixCls={prefixCls} iconPrefixCls="bamboo">
          <SmileOutlined />
          <Select />
        </ConfigProvider>
      </div>
    </div>
  );
};
ReactDOM.render(<FormSizeDemo />, mountNode);