如何在 Material-UI、ReactJS 中从分页中设置分页项的样式?

Posted

技术标签:

【中文标题】如何在 Material-UI、ReactJS 中从分页中设置分页项的样式?【英文标题】:How to style Pagination Item from Pagination in Material-UI, ReactJS? 【发布时间】:2021-01-03 02:11:19 【问题描述】:

总结 大家好!在这个问题中,我想问你在仅从material-ui导入父组件时如何设置子组件的样式。

问题 我想覆盖从 Material-UI 导入的分页项的类。我只是从 Material-UI 导入分页组件。如何从 Pagination 组件访问子组件(Pagination Item 组件)样式?

例如。我想将此样式应用于分页项组件。

.Mui-selected 
  "background-color": "transparent";
  "color": "#19D5C6";

我有以下 TSX 代码。

import React from 'react';
import  makeStyles, createStyles  from '@material-ui/core/styles';
import Pagination from '@material-ui/lab/Pagination';

// This style doesn't reach to Pagination Item
const useStyles = makeStyles((theme) =>
  createStyles(
    root: 
      'selected': 
        backgroundColor: 'transparent',
      ,
    ,
  ),
);

export default function BasicPagination() 
  const classes = useStyles();
  return (
    <Pagination count=10 className=classes.root />
  );

我现在拥有的

我想要的东西

参考文献

分页演示:https://material-ui.com/components/pagination/ 分页API:https://material-ui.com/api/pagination/ 分页项 API:https://material-ui.com/api/pagination-item/

【问题讨论】:

【参考方案1】:

Mui-selected 可以为您提供这样的帮助:

const useStyles = makeStyles((theme) =>(
  root: 
      '& .Mui-selected': 
        backgroundColor: 'transparent',
        color:'#19D5C6',
       ,
  ),
);

或者(上面没有代码):

const useStyles = makeStyles((theme) =>(
  selected: 
        backgroundColor: 'transparent',
        color:'#19D5C6',
    ,
  ),
);
// .... rest of code
const classes = useStyles();
return <Pagination
            count=10 
            className=classes.root 
            renderItem=(item)=> <PaginationItem ...item 
                           classes=selected:classes.selected />
            />

【讨论】:

谢谢!有用。你让我今天一整天都感觉很好。 root in useStyles 是否与.MuiPagination-root 相关? 不完全是.. 分页组件中的 className 属性是相关的......你可以随意调用它。如果你通过 classes 属性传递它,那么你应该像这样传递它:classes=root:classes. 非常感谢。现在我明白了很多。祝你有美好的一天! 如何为未选中的按钮添加 CSS? @SiddharthPrajosh 你选择了这两种方法中的哪一种?【参考方案2】:

未选中按钮的样式 CSS

const useStyles = makeStyles((theme) =>(
      root: 
          '& ul > li:not(:first-child):not(:last-child) > button:not(.Mui-selected)': 
            backgroundColor: 'transparent',
            color:'#19D5C6',
           ,
      ),
);

【讨论】:

以上是关于如何在 Material-UI、ReactJS 中从分页中设置分页项的样式?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Material-UI、ReactJS 中从分页中设置分页项的样式?

ReactJS + Material-UI:如何在 Material-UI <Table/> 的 <TableRow/> 之间交替颜色?

ReactJS + Material-UI:如何减小 Material-UI 的 <TableRow/> 的列宽?

ReactJS + Material-UI:如何使用 Material-UI 的 <DatePicker> 将当前日期设置为默认值?

如何结合 ReactJs Router Link 和 material-ui 组件(如按钮)?

material-ui reactjs中的嵌套抽屉