如何从材质-UI，ReactJS中的分页项目样式？
如何从材质-UI，ReactJS中的分页项目样式？
提问于 2020-09-16 09:08:48
摘要
大家好！在这个问题中，我想问您，当您只从material导入父组件时，如何设计子组件的样式。
问题
我想重写从Material导入的分页项的类。我只是从资料界面导入分页组件。如何从分页组件访问子组件(分页项组件)样式？
例如。我想将此样式应用于分页项组件。
.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/
- Pagination API：https://material-ui.com/api/pagination/
- Pagination项目API：https://material-ui.com/api/pagination-item/
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-09-16 09:37:00
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}} />}
/>Stack Overflow用户
发布于 2021-04-25 20:05:11
用于未选定按钮的CSS样式
const useStyles = makeStyles((theme) =>({
root: {
'& ul > li:not(:first-child):not(:last-child) > button:not(.Mui-selected)': {
backgroundColor: 'transparent',
color:'#19D5C6',
},
}),
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63916759
复制相关文章
相似问题
腾讯云开发者
