Изменить макет кнопки CSS ⇐ CSS

[Гость]

Мне нужно сделать макет кнопки «Видимые столбцы» таким же, как у кнопок выше, чтобы их можно было стандартизировать. Но я не могу внести эти изменения в CSS

введите здесь описание изображения

Код кнопки «Видимые столбцы»:

import React, { useState, useEffect } из 'реагировать'; импортировать * как утилиты из '../../utils'; импортировать { Multiselect } из «multiselect-react-dropdown»; экспортировать функцию по умолчанию TblApprovedTimesheetReport(реквизит) { константные заголовки = [ { id: 0, name: props.texts && props.texts['relatorio.timesheets.page. period'] ? props.texts['relatorio.timesheets.page. period'] : 'Период', значение: 'период' }, { id: 1, name: props.texts && props.texts['relatorio.timesheets.page.user'] ? props.texts['relatorio.timesheets.page.user'] : 'Сотрудник', значение: 'сотрудник' }, { id: 2, name: props.texts && props.texts['relatorio.timesheets.page.team'] ? props.texts['relatorio.timesheets.page.team'] : 'Команда', значение: 'команда' }, { id: 3, name: props.texts && props.texts['relatorio.timesheets.page.approver'] ? props.texts['relatorio.timesheets.page.approver'] : 'Лидер', значение: 'утверждающий' }, { id: 4, name: props.texts && props.texts['relatorio.timesheets.page.hourstempo'] ? props.texts['relatorio.timesheets.page.hourstempo'] : 'Часы Jira', значение: 'hourstempo' }, { id: 5, name: props.texts && props.texts['relatorio.timesheets.page.hoursponto'] ? props.texts['relatorio.timesheets.page.hoursponto'] : 'Часы регистрации', значение: 'hoursponto' }, { id: 6, name: props.texts && props.texts['relatorio.timesheets.page.reason'] ? props.texts['relatorio.timesheets.page.reason'] : 'Комментарий', значение: 'причина' }, { id: 8, name: props.texts && props.texts['relatorio.timesheets.page.origin'] ? props.texts['relatorio.timesheets.page.origin'] : 'Происхождение', значение: 'происхождение' }, { id: 9, name: props.texts && props.texts['relatorio.timesheets.page.approvaldatetime'] ? props.texts['relatorio.timesheets.page.approvaldatetime'] : 'Дата и время утверждения', значение: 'approvaldatetime' }, ] const [approvedList, setApprovedList] = useState([]); const [selectedColumns, setSelectedColumns] = useState(заголовки) useEffect(() => { setApprovedList(props.data.approvedTimesheetsList); }, [реквизит]) функция onColumnSelect(selectedList) { (selectedList && setSelectedColumns (selectedList)); } функция hasToShow(columnIdx) { return selectedColumns.some(({ id }) => id === columnsIdx); } возвращаться ( Видимые столбцы: {props.texts && props.texts['relatorio.timesheets.page.approvedts'] ? props.texts['relatorio.timesheets.page.approvedts'] : 'Утвержденные расписания' { headers.map((item) => { вернуть hasToShow(item.id) && ( sortTableAp(item.id)}>{item.name ); }) } { (approvedList && ApprovedList.length > 0 && ( утвержденныйList.map((item) => { возвращаться ( { hasToShow(0) && ( {utils.formatPeriodDate(new Date(item. periodStartDateISO + '00:00:00'))} - {utils.formatPeriodDate(new Date(item. periodEndDateISO + ' 00:00: 00')) ) } { hasToShow(1) && ( {item.usuario ) } { hasToShow(2) && ( {item.team ) } { hasToShow(3) && ( {item.approver ) } { hasToShow(4) && ( {Number(item.hoursTempo).toFixed(2)} ) } { hasToShow(5) && ( {((item.horasPonto == '?') ? item.horasPonto : Number(item.horasPonto).toFixed(2)) ) } { hasToShow(6) && ( {item.reason} ) } { hasToShow(7) && ( {item.origin} ) } { hasToShow(8) && ( {item.actionDate ) } ); }) )) || ( (!approvedList || утвержденный список.длина === 0) && ( {props.texts ? props.texts['relatorio.timesheets.page.noshowdata']: 'Нет данных для этого интервала' )) } ); функция sortTableAp(n) { console.log("Орденандо: " +n); отладчик; таблица var, строки, переключение, я, x, y, mustSwitch, dir, switchcount = 0; table = document.getElementById("tblApprTimesheetsReport"); переключение = правда; реж = "по возрастанию"; в то время как (переключение) { переключение = ложь; строки = таблица.строки; for (i = 1; i < (rows.length - 1); i++) { долженПереключить = ложь; x = rows.getElementsByTagName("TD")[n]; y = rows[i + 1].getElementsByTagName("TD")[n]; если (реж == "по возрастанию") { if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { долженПереключиться = Истина; перерыв; } } else if (dir == "desc") { if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { долженПереключиться = Истина; перерыв; } } } если (следуетПереключить) { rows.parentNode.insertBefore(rows[i + 1], rows); переключение = правда; количество переключателей ++; } еще { if (switchcount == 0 && dir == "asc") { реж = «дескрипт»; переключение = правда; } } } } } Код остальных кнопок приведен ниже

import React, { useState } из 'реагировать' импортировать кнопку из @atlaskit/button; // импортировать { DatePicker } из '@atlaskit/datetime-picker'; //импортируем {gridSize} из '@atlaskit/theme/constants'; импортировать DatePicker, {registerLocale, setDefaultLocale} из «реагировать-datepicker»; импортировать ptBR из «date-fns/locale/pt-BR»; импортировать «реагировать-datepicker/dist/реагировать-datepicker.css»; импортировать './index.css' RegisterLocale('ptBR', ptBR); setDefaultLocale('ptBR'); экспортировать функцию по умолчанию HdrTimesheetsReport(реквизит) { const [предложения, setSuggestions] = useState([]); const [текст, setText] = useState(''); const [accountsuggestions, setaccountSuggestions] = useState([]); const [accounttext, setaccountText] = useState(''); const [categoryaccountsuggestions, setcategoryaccountSuggestions] = useState([]); const [categoryaccounttext, setcategoryaccountText] = useState(''); // Команда функция onTextChange(e) { пусть предложения = []; константное значение = e.target.value; если (значение.длина > 0) { const regex = new RegExp(`^${value}`, `i`); предложения = props.teamList.filter(v => regex.test(v.teamName)); } еще { реквизит.onTeamSelected(ноль); } setSuggestions (предложения); setText (значение); } предложение функцииSelected (значение) { setText(value.teamName); setSuggestions([]); props.onTeamSelected(значение); } функция renderSuggestions() { если (suggestions.length === 0) { вернуть ноль; } возвращаться ( {suggestions.map(team => [*] OfferSelected(team)}>{team.teamName)} ) } // Счет функция onAccountTextChange(e) { let accountuggestions = []; константное значение = e.target.value; если (значение.длина > 0) { const regex = new RegExp(`^${value}`, `i`); accountuggestions = props.accountList.filter(v => regex.test(v.accountName)); } еще { props.onAccountSelected(null); } setaccountSuggestions(accountsuggestions); setaccountText (значение); } функция предложениеAccountSelected (значение) { setaccountText(value.accountName); setaccountSuggestions([]); props.onAccountSelected(значение); } функция renderAccountSuggestions() { если (accountsuggestions.length === 0) { вернуть ноль; } возвращаться ( {accountsuggestions.map(account => [*]suggestionAccountSelected(account)}>{account.accountName)} ) } // Аккаунт категории функция onCategoryAccountTextChange(e) { let Categoryaccountsuggestions = []; константное значение = e.target.value; если (значение.длина > 0) { const regex = new RegExp(`^${value}`, `i`); Categoryaccountsuggestions = props.categoryaccountList.filter(v => regex.test(v.categoryaccountName)); } еще { props.onCategoryAccountSelected(null); } setcategoryaccountSuggestions (categoryaccountsuggestions); setcategoryaccountText(значение); } функция OfferionategoryAccountSelected (значение) { setcategoryaccountText(value.categoryaccountName); setcategoryaccountSuggestions([]); props.onCategoryAccountSelected(значение); } функция renderCategoryAccountSuggestions() { если (categoryaccountsuggestions.length === 0) { вернуть ноль; } возвращаться ( {categoryaccountsuggestions.map(categoryaccount => [*]suggestionategoryAccountSelected(categoryaccount)}>{categoryaccount.categoryaccountName)} ) } // Функции порядка возвращаться ( {props.texts && props.texts['relatorio.page.startdate'] ? props.texts['relatorio.page.startdate'] : 'Дата начала'}: {props.texts && props.texts['relatorio.page.enddate'] ? props.texts['relatorio.page.enddate'] : 'Дата окончания'}: {props.texts && props.texts['relatorio.page.search'] ? props.texts['relatorio.page.search'] : 'Поиск' { props.selectedTab в [0,1,2,3] && ( {props.texts && props.texts['relatorio.page.teamsearch'] ? props.texts['relatorio.page.teamsearch'] : 'Поисковая группа'}:   {renderSuggestions()} ) } { props.selectedTab в [4] && ( {props.texts && props.texts['relatorio.page.accountsearch'] ? props.texts['relatorio.page.accountsearch'] : 'Поиск учетной записи'}:   {renderAccountSuggestions()} ) } { props.selectedTab в [4] && ( {props.texts && props.texts['relatorio.page.categoryaccountsearch'] ? props.texts['relatorio.page.categoryaccountsearch'] : 'Поиск учетной записи категории'}:   {renderCategoryAccountSuggestions()} ) } {props.texts && props.texts['relatorio.page.export'] ? props.texts['relatorio.page.export'] : 'Экспорт' ); } А CSS приведен ниже

метка { справа: 2 пикселя; положение: относительное; } .hdrtimesheets-контейнер { цвет фона: белый; дисплей: гибкий; гибкое направление: строка; отступ: 5 пикселей; вертикальное выравнивание: по середине; нижняя граница: 1 пиксель сплошной RGB (221, 232, 241); } .hdrtimesheets-left-elements { цвет фона: белый; дисплей: гибкий; гибкое направление: строка; поле: 5 пикселей; отступ: 5 пикселей; максимальная ширина: 80%; ширина: 80%; } .hdrtimesheets-right-elements { цвет фона: белый; поле: 5 пикселей; отступ: 5 пикселей; максимальная ширина: 20%; ширина: 20%; дисплей: гибкий; justify-content: flex-end; выровнять-элементы: по центру; } .hdrtimesheets-element { поле: 5 пикселей; выравнивание текста: по центру; дисплей: гибкий; гибкое направление: строка; выровнять-элементы: по центру; } .hdrtimesheets-element-button { цвет фона: белый; поле: 5 пикселей; выравнивание текста: по центру; дисплей: гибкий; максимальная ширина: 30%; } .hdrtimesheets-element-button .search_wrapper { граница: 1 пиксель, сплошная серая; граница-радиус: 0; отступ: 0 пикселей; } .hdrtimesheets-element-button input.searchBox { ширина: 100%; семейство шрифтов: Arial, Helvetica, без засечек; размер шрифта: 14 пикселей; цвет: rgba(0, 0, 0, 0,73); отступ: 10 пикселей 5 пикселей; box-shadow: 0 0 1px rgba(0,0,0,0.1), 0 2px 4px 1px rgba(0,0,0, .18); размер коробки: граница-коробка; контур: нет; } .btn-экспорт { цвет фона: белый; цвет: rgba(145, 137, 137, 0,555); начертание шрифта: жирный; граница: нет; курсор: указатель; } .typeahead { позиция: абсолютная; z-индекс: 10000; } .TypeAheadDropDown { ширина: подходящее содержимое; цвет фона: белый; } Ввод .TypeAheadDropDown, ввод .hdrtimesheets-element { ширина: 100%; семейство шрифтов: Arial, Helvetica, без засечек; размер шрифта: 14 пикселей; цвет: rgba(0, 0, 0, 0,73); отступ: 10 пикселей 5 пикселей; граница: 1 пиксель, сплошная серая; box-shadow: 0 0 1px rgba(0,0,0,0.1), 0 2px 4px 1px rgba(0,0,0, .18); размер коробки: граница-коробка; контур: нет; } .TypeAheadDropDown ул { тип стиля списка: нет; выравнивание текста: по левому краю; маржа: 0; заполнение: 0; border-top: 1 пиксель, сплошной серый; } .TypeAheadDropDown li{ отступ: 10 пикселей 5 пикселей; курсор: указатель; фон: белый; } .TypeAheadDropDown li:hover{ фон: светло-серый; оформление текста: подчеркивание; } Может ли кто-нибудь помочь мне с этими изменениями?