Кажется, я не могу сосредоточить текст на первичном выпадении в реагировании ⇐ CSS

[Anonymous]

Итак, я пытаюсь сосредоточить текст из этого раскрывающегося спина от PrimereAct, но я уже долго боролся с темой CSS и все еще не имею подсказки ... введите описание изображения здесь < /p>
Я поделюсь только только выпадающим спином и CS с темы, прикрепленной к выпадению, я надеюсь, что это достаточно, чтобы получить контекст. оператор: < /p>

Код: Выделить всё

                

setLazyState(prev =>  ({ ...prev, page: 0, rows: value }))
}
options={[
{ label: '20 per page', value: 20 },
{ label: '30 per page', value: 30 },
{ label: '50 per page', value: 50 },
{ label: '100 per page', value: 100 },
{ label: '200 per page', value: 200 },
]}
/>
< /code>
// core
.p-dropdown {
display: inline-flex;
cursor: pointer;
position: relative;
user-select: none;
height: 32px;
width: 148px;
}

.p-dropdown-clear-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
}

.p-dropdown-trigger {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.p-dropdown-label {
display: inline-flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
flex: 1 1 auto;
width: 1%;
text-overflow: ellipsis;
cursor: pointer;
height: 100%;
}

.p-dropdown-label-empty {
overflow: hidden;
opacity: 0;
}

input.p-dropdown-label {
cursor: default;
}

.p-dropdown .p-dropdown-panel {
min-width: 100%;
}

.p-dropdown-panel {
position: absolute;
top: 0;
left: 0;
}

.p-dropdown-items-wrapper {
max-height: 40px;
overflow-y: auto;
}

.p-dropdown-item {
cursor: pointer;
font-weight: normal;
white-space: nowrap;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
}

.p-dropdown-item-group {
cursor: auto;
}

.p-dropdown-items {
margin: 0;
padding: 0;
list-style-type: none;
}

.p-dropdown-filter {
width: 100%;
}

.p-dropdown-filter-container {
position: relative;
}

.p-dropdown-filter-icon {
position: absolute;
top: 50%;
margin-top: -0.5rem;
}

.p-fluid .p-dropdown {
display: flex;
}

.p-fluid .p-dropdown .p-dropdown-label {
width: 1%;
}

// theme
.p-dropdown {
background: $inputBg;
border: $inputBorder;
transition: $formElementTransition;
border-radius: $borderRadius;
outline-color: transparent;

&:not(.p-disabled):hover {
border-color: $inputHoverBorderColor;
}

&:not(.p-disabled).p-focus {
@include focused-input();
}

&.p-variant-filled {
background: $inputFilledBg;

&:not(.p-disabled):hover {
background-color: $inputFilledHoverBg;
}

&:not(.p-disabled).p-focus {
background-color: $inputFilledFocusBg;

.p-inputtext {
background-color: transparent;
}
}
}

&.p-dropdown-clearable {
.p-dropdown-label {
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
}
}

.p-dropdown-label {
background: transparent;
border: 0 none;

&.p-placeholder {
color: $inputPlaceholderTextColor;
}

&:focus,
&:enabled:focus {
outline: 0 none;
box-shadow: none;
}
}

.p-dropdown-trigger {
background: transparent;
color: $inputIconColor;
width: $inputGroupAddOnMinWidth;
border-top-right-radius: $borderRadius;
border-bottom-right-radius: $borderRadius;
height: 100%;
}

.p-dropdown-clear-icon {
color: $inputIconColor;
right: $inputGroupAddOnMinWidth;
}

&.p-invalid.p-component {
@include invalid-input();
}
}

.p-dropdown-panel {
background: $inputOverlayBg;
color: $inputListTextColor;
border: $inputOverlayBorder;
border-radius: $borderRadius;
box-shadow: $inputOverlayShadow;

.custom-dropdown {
max-height: 300px;
overflow-y: auto;
}

.p-dropdown-header {
padding: $inputListHeaderPadding;
border-bottom: $inputListHeaderBorder;
color: $inputListHeaderTextColor;
background: $inputOverlayHeaderBg;
margin: $inputListHeaderMargin;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;

.p-dropdown-filter {
padding-right:  nth($inputPadding, 2) + $primeIconFontSize;
margin-right: -1 * (nth($inputPadding, 2) + $primeIconFontSize);
}

.p-dropdown-filter-icon {
right: nth($inputPadding, 2);
color: $inputIconColor;
}
}

.p-dropdown-items {
padding: $inputListPadding;

.p-dropdown-item {
margin: $inputListItemMargin;
padding: $inputListItemPadding;
border: $inputListItemBorder;
color: $inputListItemTextColor;
background: $inputListItemBg;
transition: $listItemTransition;
border-radius: $inputListItemBorderRadius;

&:first-child {
margin-top: 0;
}

&:last-child {
margin-bottom: 0;
}

&.p-highlight {
color: $highlightTextColor;
background: $highlightBg;

&.p-focus {
background: $highlightFocusBg;
}
}

&:not(.p-highlight):not(.p-disabled) {
&.p-focus {
color: $inputListItemTextHoverColor;
background: $inputListItemHoverBg;
}
}

.p-dropdown-check-icon {
position: relative;
margin-left: -1 * $inlineSpacing;
margin-right: $inlineSpacing;
}
}

.p-dropdown-item-group {
margin: $submenuHeaderMargin;
padding: $submenuHeaderPadding;
color: $submenuHeaderTextColor;
background: $submenuHeaderBg;
font-weight: $submenuHeaderFontWeight;
}

.p-dropdown-empty-message {
padding: $inputListItemPadding;
color: $inputListItemTextColor;
background: $inputListItemBg;
}
}
}

Подробнее здесь: https://stackoverflow.com/questions/797 ... down-input