ant-design 里的例子被Input的原生的样式覆盖了

Question

1. 这是一个搜索框，引入在我的项目里

发现错位了

 <div className={styles["global-search-wrapper"]} style={{ width: 300 }}>
        <AutoComplete
          className={styles["global-search"]}
          size="large"
          style={{ width: '100%' }}
          dataSource={dataSource.map(renderOption)}
          onSelect={onSelect}
          onSearch={this.handleSearch}
          placeholder="input here"
          optionLabelProp="text"
        >
          <Input
            suffix={(
              <Button className={styles["input-icon"]} size="large" type="primary">
                <Icon type="search" />
              </Button>
            )}
          />
        </AutoComplete>
      </div>

通过调试发现实际工作的样式是

.ant-input-affix-wrapper .ant-input-suffix {
    right: 12px;
}

但是实际上官方的例子中，已经覆盖了

.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
   right: 0px;
 }

为什么下面的优先级没有上面的高呢？
上面的是Input这个组件里带的

Answer 1

F12确认下是样式没应用上，还是优先级问题？

Answer 2

同样的问题我也遇到了，重点是项目发布之后才会出现，antd的input 自动在input外壳套了一个

<span class="ant-input-affix-wrapper ant-input-affix-wrapper-has-feedback">
  <input/>
  <span class="ant-input-suffix"></span>
</span>

然后样式就变了，有什么办法属性设置不出现这些的吗？