Мобильная версияЯ пытался использовать пользовательскую полосу прокрутки в своем приложении React (NextJs), и по большей части она работает нормально, но портит выравнивание таблицы antd. Почему это происходит? Я не могу этого понять.
Вверху — изображение с полосой прокрутки по умолчанию, а ниже — изображение после добавления пользовательской полосы прокрутки. Обратите внимание на белую линию и пробел в конце таблицы.
Ниже показано изображение, на котором при наведении на него курсора этот блок отображается в виде полосы прокрутки.
соответствующий код ниже. пожалуйста, помогите мне выяснить, что вызывает эту проблему.
// Это компонент, в котором я импортирую и использую таблицу antd. Делимся только соответствующими примерами кода. 0 ? { х: "авто" }: не определено} прокрутка = {{ x: "800px", y: tableHeight ? tableHeight: "53vh" }} локаль={{ пустойтекст: , }} dataSource={dataSource} столбцы = {столбцы} нижний колонтитул={нижний колонтитул ? () => нижний колонтитул: не определено} rowSelection={rowSelection ? handleRowSelection: не определено} onChange={onChange} className={`${className} граница v-line border-neutral-200 max-w-auto rounded-xl overflow-hidden`} разбивка на страницы = {ложь} расширяемый={ расходуемые данные ? { расширенныйRowKeys, расширенныйRowRender: (запись) => {expendableData, expandIcon: ({расширено, запись }) => ( handleExpandIconClick(record, e)} className={`transition-all period-500 курсор-указатель ml-2 ${ расширено? "повернуть-180" : "" }`} /> ), onExpand: handleExpand, } : неопределенный } /> css для пользовательской полосы прокрутки и CSS таблицы antd.
@import url("https://fonts.googleapis.com/css2?famil ... splay=swap"); .ant-таблица, .ant-таблица * { /* семейство шрифтов: "__Inter_0ec1f4", "__Inter_Fallback_0ec1f4" !important; */ семейство шрифтов: "Inter", без засечек !important; } .v-line .ant-table-body > table > .ant-table-tbody > tr > .ant-table-cell { /* @apply border-r border-neutral-200 !important; */ } .background-neutral-100 .ant-table-body > стол > .ant-table-tbody > тр > .ant-table-cell { @apply bg-neutral-100 !важно; } .ant-table-thead > tr > th { @apply bg-primary-50 text-neutral-500 text-caption шрифт-полужирный py-3 !important; } .ant-table-wrapper .ant-table-thead > tr > th { отступы: 6 пикселей 12 пикселей 6 пикселей 12 пикселей ! важно; } .ant-table-thead > tr > .ant-table-cell { отступы: 12 пикселей 16 пикселей ! важно; /* правая граница: 1 пиксель сплошной #e0e0e0 ; */ } .v-line .ant-table-thead > tr > .ant-table-cell { @apply border-r border-r-neutral-300 !important; } .v-line .ant-table-thead > tr > .ant-table-cell:last-child { @apply border-none !important; } .v-line .ant-table-thead > tr > .ant-table-selection-column { правая граница: нет !important; } .ant-table-selection-column { правая граница: нет !important; } .v-line .ant-table-thead > tr > .ant-table-row-expand-icon-cell { правая граница: нет !important; } /* .ant-table-selection-column { правая граница: нет !important; } */ .ant-table-tbody > tr > .ant-table-cell { отступы: 8 пикселей 12 пикселей 8 пикселей 12 пикселей ! важно; /* правая граница: 1 пиксель сплошной #f0f0f0; */ /* @apply border-r-neutral-300 border-r !important; */ } .sales-order-modal-table .ant-table-tbody > tr > .ant-table-cell { отступ: 12 пикселей !важно; } .ant-table-thead > tr > td { @apply bg-primary-50 text-neutral-500 text-caption шрифт-полужирный !важно; } .ant-table-cell { @apply px-6 !важно; } .ant-table-cell:first-child { @apply pr-1.5 !важно; } .ant-table-cell:nth-child(2) { @apply pl-1.5 !важно; } /* Нормальное состояние */ .ant-checkbox-inner { border-radius: 6px !important; } .ant-checkbox-checked:после { border-radius: 6px !important; } .ant-dropdown-меню { @apply px-3 py-2 !важно; } .ant-dropdown-menu-item { @apply p-2 !важно; } .ant-table-filter-dropdown { @apply rounded-lg !important; } .filter > .ant-checkbox-wrapper > .ant-checkbox { /* @apply mr-1 !important; */ } .ant-table-tbody > tr.ant-table-row:hover > тд { @apply bg-вторичный-50 !важно; @apply bg-вторичный-50 !важно; } .ant-table-filter-column { @apply min-w-max !важно; } /* .ant-checkbox { @apply ml-[-8px] !important; @apply min-[1900px]:ml-[-10px] !important; @apply min-[2000px]:ml-[-12px] !important; @apply min-[2100px]:ml-[-14px] !important; @apply min-[2200px]:ml-[-16px] !important; @apply min-[2300px]:ml-[-18px] !important; @apply min-[2400px]:ml-[-20px] !important; @apply min-[2500px]:ml-[-22px] !important; @apply min-[2600px]:ml-[-24px] !important; } */ .ant-table-selection-column { отступ справа: 8 пикселей !важно; } .ant-table-selection-column .ant-checkbox-wrapper { поле справа: 0 пикселей! важно; } th.ant-table-cell.ant-table-selection-column.ant-table-cell-fix-left { отступ справа: 0 пикселей! важно; } td.ant-table-cell.ant-table-selection-column.ant-table-cell-fix-left { отступ справа: 0 пикселей! важно; отступ слева: 12 пикселей !важно; } :where(.css-dev-only-do-not-override-fkqrct).ant-table-wrapper стол тр th.ant-table-selection-column, :where(.css-dev-only-do-not-override-fkqrct).ant-table-wrapper стол тр td.ant-table-selection-column { выравнивание текста: по правому краю; } :where(.css-dev-only-do-not-override-fkqrct).ant-checkbox-disabled .ant-checkbox-inner { @apply bg-neutral-100 border border-neutral-200 !important; } .ant-table-tbody > tr > .ant-table-row-expand-icon-cell { отступ справа: 0 пикселей! важно; } /* .ant-table-body { переполнение: скрыто! важно; поле справа: -17 пикселей ! важно; } */ .ant-table-footer { @apply pb-2 pt-[2px] !important; @apply bg-white !важно; } .ant-table-column-sort { @apply bg-neutral-100 !важно; } /* .ant-table-container > div { переполнение-y: авто! важно; } */ Код пользовательской полосы прокрутки:
/* начало пользовательской полосы прокрутки-css */ ::-webkit-полоса прокрутки { ширина: 14 пикселей; высота: 14 пикселей; } ::-webkit-scrollbar-track { цвет фона: прозрачный; радиус границы: 9999 пикселей; } ::-webkit-scrollbar-thumb { граница: 5 пикселей сплошная rgba(0, 0, 0, 0); фоновый клип: поле для заполнения; радиус границы: 9999 пикселей; цвет фона: #e1e8f0; } ::-webkit-scrollbar-thumb:hover { цвет фона: #94a2b8 !важно; дисплей: блокировать !важно; } .sidebar-container::-webkit-scrollbar { ширина: 10 пикселей; высота: 10 пикселей; } .sidebar-container::-webkit-scrollbar-track { цвет фона: прозрачный; радиус границы: 9999 пикселей; } .sidebar-container::-webkit-scrollbar-thumb { граница: 4 пикселя сплошная rgba(0, 0, 0, 0); фоновый клип: поле для заполнения; радиус границы: 9999 пикселей; цвет фона: #e1e8f0; } .sidebar-container::-webkit-scrollbar-thumb:hover { цвет фона: #94a2b8 !важно; дисплей: блокировать !важно; } .scrollbar-hidden::-webkit-scrollbar-thumb { цвет фона: прозрачный; дисплей: нет; } .scrollbar-hidden::-webkit-scrollbar { ширина: 0 пикселей; высота: 0 пикселей; } /* конец пользовательской полосы прокрутки-css */
