如何解决将AccordionSummary中的文本右对齐?
我正在使用Material-UI(https://material-ui.com/api/expansion-panel-summary/)中的Accordion组件。无论我做什么,默认情况下,文本(尤其是AccordionSummary
中出现的单词“ Filter”)似乎都左对齐。我该如何更改它以使其与右侧对齐?
<Accordion>
<AccordionSummary expandIcon={<FilterListIcon style={{color: 'white'}} />}
style={{backgroundColor: 'black',color: 'white',textAlign: "right"}}>
Filter
</AccordionSummary>
<AccordionDetails style={{backgroundColor: 'black',color: 'white'}}>
//Some details here
</AccordionDetails>
</Accordion>
解决方法
AccordionSummary
组件主要使用flex
容器,因此textAlign
不会为您完成此工作。您可以改用justifyContent
。您可以定位content
规则名称以专门定位AccordionSummary的内容(即您的过滤器文本)
const useStyles = makeStyles({
customAccordionSummary: {
justifyContent: "flex-end"
}
})
function App() {
const classes = useStyles();
return (
<Accordion>
<AccordionSummary
classes={{ content: classes.customAccordionSummary }}
...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。