Nano Hash - криптовалюты, майнинг, программирование

Как применить css к заголовку таблицы в Material ui Table stickyHeader?

Я использую таблицу пользовательского интерфейса материала с опорой stickyHeader, так как хочу, чтобы заголовок моей таблицы был исправлен. Но тогда другой CSS не применяется к части заголовка.

const useStyles = makeStyles((theme) => ({
    tableHead: {
    borderBottomStyle: "solid",
    borderBottomColor: "blue",
  },
}))


const CustomTable = () => {
return(
<TableContainer component={Paper} className={classes.tableContainer}>
    <Table stickyHeader aria-label="simple table">
        <TableHead classes={{ root: classes.tableHead }}>
            <TableRow>
                <TableCell>Hii</TableCell>
            </TableRow>
        </TableHead>
    </Table>
</TableContainer>
)
}

Когда я удаляю свойства stickyHeader. У меня появляется синяя рамка внизу заголовка, но не в случае липкого заголовка.

reactjs javascript material-ui css
03.02.2021

Ответы:


1

добавляя реквизиты stickyHeader, добавляется класс, который устанавливает border-collapse:separate. это необходимо удалить, чтобы граница заголовка была видна.
Выберите класс stickyHeader Mui из Table.

<TableContainer component={Paper} className={classes.tableContainer}>
    <Table stickyHeader classes={{stickyHeader:classes.stickyHeader}} aria-label="simple table">
        <TableHead classes={{ root: classes.tableHead }}>
            <TableRow>
                <TableCell>Hii</TableCell>
            </TableRow>
        </TableHead>
    </Table>
</TableContainer>

const useStyles = makeStyles((theme) => ({
    tableHead: {
        borderBottomStyle: "solid",
        borderBottomColor: "blue"
    },
    stickyHeader:{
        borderCollapse:'collapse'
    }
}));

Обновлять

Чтобы сделать границу фиксированной, есть обходной путь: просто добавьте borderBottom в TableCell файла TableHead.

<Table stickyHeader aria-label="simple table">
    <TableHead>
        <TableRow>
            <TableCell
                style={{
                    borderBottom: "5px solid blue"
                }}
            >
                Hii
            </TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
        {//Tablebody items}
    </TableBody>
</Table>

Рабочая демонстрация:
Редактировать gallant-euler-5p4rn

03.02.2021
  • Да, теперь я вижу синюю рамку, но граница также прокручивается. 03.02.2021
  • Как приклеить синюю рамку к заголовку? 03.02.2021
  • Я обновился. проверьте этот метод 03.02.2021
  • Неа! Граница все еще прокручивается 03.02.2021
  • вы проверили демо-версию codeandbox ??? В этом случае нет необходимости добавлять какой-либо стиль для краев-коллапса или чего-то еще ... 03.02.2021
  • Ой! Я этого не заметил! Да, я только что это видел. Он отлично работает в CodeSandBox. Завтра проверю в коде. Спасибо большое за вашу помощь. Сейчас я помечаю это как Ответ! Сообщу вам, если у меня возникнут трудности, как только я проверю это в своем коде. 03.02.2021
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..