reactjs - antd 中选择标签的占位符属性不起作用

Question

这是我正在使用的代码片段。占位符未显示在 UI 中。我正在使用 antd 控件。

<Select placeholder="Select A User Role" value={'RoleID'}>
  <Option value='2'>Company Admin</Option>
  <Option value='3'>Company User</Option>
</Select>

样式.css

.ant-select-dropdown {
    max-width: 400px;
    width: 100% !important;
}
.ant-select-selection-selected-value {
    width: 100%;
  }
.ant-table-tbody > tr > td, .ant-table-thead > tr > th
{
    padding:4px;    
}

tr:nth-child(even){
    background: white;
} 
tr.active { 
background-color: #b3ffb3;
}
thead[class*="ant-table-thead"] th{
    background-color:#000 !important;
    color: white;
    font-weight: bold;
    border-color: #000;
  }
.table_btn
{
    margin:0 !important;
}
.ant-btn
{
    margin:0;
}
.ant-create-invoice-form {
    padding: 24px;   
    margin:24px;
    background: #f1e6ff;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
  }  
  .ant-create-invoice-header-form {   
    height: 25px; 

  } 
.totallblStyle{
    font-size: 14px;
    font-weight: bold;
}
.lblStyle{
    font-size: 12px;
    font-weight: bold;
    padding-top: 10px;
}
.headerlblStyle{
    font-size: 14px;
    font-weight: bold;
    width: 160px;    
    padding-bottom: 10px;   
}
.headerlblDescStyle{
    font-size: 14px;
    font-weight: bold;
    width: 260px;    
}
.userHeader{
    color: #000;
    cursor: pointer;
}
.headerStyle{
    color: #000;   
}

.gx-main-content-wrapper {
    padding: 5px 20px ; 
}
.ant-table-tbody > tr:hover > td {
    color: #fff;
}
.cancel-btn {
  color: #f0ad4e ;
  border-color: #d9d9d9 ;
}
.cancel-btn:hover {
   background-color: #f0ad4e;
    color: #fff;
    border-color: #eea236;
}
.save-btn {
   color: #3d8918 ;
   border-color: #d9d9d9 ;
}
.save-btn:hover {
    background-color:#3d8918 ;
    color: #fff ;
    border-color: #d9d9d9
}
.loginAs {
   text-align: center;
    margin-bottom: 10px;
}
.sign-up 
.gx-app-login-container {
  max-width: 1000px !important;
}
.gx-user-popover li:hover,
 .gx-user-popover li:focus {
    background-color: #d5d5d5;
}
.avtImgStyle{
    width: 35px;
    height: 35px;
}
.ant-input-disabled {
    background-color: #fff;
    opacity: 1;
    cursor: not-allowed;
    color: inherit;
}
.selected {
    background: #545454 !important;
    color:#fff !important;
}

.ant-select-dropdown-menu-item:hover {
     color:#fff ;
}
.ant-tabs-bar .ant-tabs-tab {
    text-align: right;
    font-weight: bold;
}

这是我在页面中导入的样式页面。

所有的占位符<Input>标签正在工作。

但不适用于 <Select> .

此 CSS 是否会阻止 的占位符？如何使 select 的占位符可见？

Answer 1

需要设置宽度才能看到

<Select placeholder="Select A User Role" style={{ width: 200 }}>
  <Option value="2">Company Admin</Option>
  <Option value="3">Company User</Option>
</Select>

工作示例:https://codesandbox.io/s/4w8yxqm7w4