expansionPanelSummary: {
content: {
"& > :last-child": {
paddingRight: 0
}
},
expandIcon: {
top: "80%"
}
}
我正在尝试覆盖 Material UI 扩展面板组件的样式但无法获得结果
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon color="primary" />}
classes={{ content: classes.expansionPanelSummary.content, expandIcon: classes.expansionPanelSummary.expandIcon}}
>
我无法在主题级别覆盖它,因为该组件正在其他地方使用默认设置。
最佳答案
看起来您已经将一个额外的级别(“expansionPanelSummary”)放入您的 styles
对象中。那是无效的。传递给 withStyles
的 styles
对象的顶级属性将被转换为类。在您的示例中,classes.expansionPanelSummary
的值是 JSS 生成的类名,但 classes.expansionPanelSummary.content
不会。
这是所需语法的示例:
import React from "react";
import { withStyles } from "@material-ui/core/styles";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
const styles = {
expansionPanelSummaryContent: {
"& > :last-child": {
paddingRight: 100
}
},
expansionPanelSummaryExpandIcon: {
top: "80%"
}
};
function SimpleExpansionPanel(props) {
const { classes } = props;
return (
<div>
<ExpansionPanel>
<ExpansionPanelSummary
classes={{
content: classes.expansionPanelSummaryContent,
expandIcon: classes.expansionPanelSummaryExpandIcon
}}
expandIcon={<ExpandMoreIcon />}
>
<Typography className={classes.heading}>
Expansion Panel 1 - increasing the amount of content so that I can
tell a difference when the padding-right is altered.
</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
</div>
);
}
export default withStyles(styles)(SimpleExpansionPanel);
我将 paddingRight
更改为 100,这样我就可以很容易地看到一个效果来验证它是否被应用。
这是在 CodeSandbox 中:
https://stackoverflow.com/questions/54780840/
相关文章:
c++ - 为什么 mersenne_twister_engine 保证某些结果?
angular - NgRx - 从后端获取错误验证并传递给组件
scala - 使用 Scala 将多列转换为 Spark Dataframe 上的一列 map
reactjs - 当 URL 包含多个路径时 React Router 不工作
unicode - 为什么 unicode 代码点的 UTF-8 编码不能放入 3 个字节
xamarin - 使用 xamarin 表单从页面中删除向后滑动手势