свойство заполнителя тега select в antd не работает

Question

Это фрагмент кода, который я использую. Заполнитель не отображается в пользовательском интерфейсе. Я использую элементы управления antd.

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

style.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 - ant-select (не ant-select-dropdown, как в предоставленном вами коде). Задание ширины компонента с использованием правильного имени класса должно работать.

Также, как упоминалось в комментарии @ baitun, вам нужно удалить свойство value, чтобы показать заполнитель.

Answer 2

Нет, если я прав, но я думаю, что вы должны закодировать это как показано ниже

<select>
    <!-- Use an option being selected and disabled default -->
    <option value="" selected disabled>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

Приведенный выше код можно использовать для реагирования, а остальное касается связывания данных и добавления обратных вызовов событий.

Answer 3

Вам нужно установить ширину, чтобы увидеть ее

<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