Ant-design: `prefixCls` is not inherited in some components

Created on 9 Jun 2018  ·  4Comments  ·  Source: ant-design/ant-design

This is an umbrella issue to track the problem of prefixCls.

  • [ ] #10017 Tag: prefixCls not passed to Icon
  • [ ] #10565 Modal: prefixCls not passed to Button
  • [x] #12546 Modal.xxx: prefixCls not passed to mask
  • [ ] #10042 Upload - Dragger: Pass prefixCls to UploadList - Upload
  • [ ] Transfer
  • [ ] #12676 Popconfirm: prefixCls not passed to Button
Inactive IssueHuntFest help wanted

Most helpful comment

From internal discussions:

We'll introduce a new provider called ConfigProvider for the configuration of prefixCls.

import { ConfigProvider, Button } from 'antd';

<ConfigProvider prefixCls="awesome-">
  <Button>A Button</Button>
</ConfigProvider

produces:

<button type="button" class="awesome-btn"><span>A Button</span></button>

All 4 comments

I believe Input should be included on the list as well.

When using import 'antd/dist/antd.less' or import 'antd/lib/input/style';

.ant-input-affix-wrapper .ant-input-prefix, .ant-input-affix-wrapper .ant-input-suffix {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    line-height: 0;
    color: rgba(0, 0, 0, 0.65);
}

While using import 'antd/dist/antd.css' would have the browser specific prefix

.ant-input-affix-wrapper .ant-input-prefix, .ant-input-affix-wrapper .ant-input-suffix {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    line-height: 0;
    color: rgba(0, 0, 0, 0.65);
}

@chungwong Not the same issue.

From internal discussions:

We'll introduce a new provider called ConfigProvider for the configuration of prefixCls.

import { ConfigProvider, Button } from 'antd';

<ConfigProvider prefixCls="awesome-">
  <Button>A Button</Button>
</ConfigProvider

produces:

<button type="button" class="awesome-btn"><span>A Button</span></button>

It is resolved via #12991

Was this page helpful?
0 / 5 - 0 ratings