Typography组件的默认变体和颜色是body1
和initial
。我已经制作了一个组件,并且当Typography组件用作它的子代时,我希望默认设置为body2
and textSecondary
。有没有一种方法可以在Material UI中执行此操作?
<Sidebar>
<Typography>
This should have body2 and textSecondary
when nothing else is specified.
</Typography>
</Sidebar>
<Typography>
This should have the regular defaults.
</Typography>
我当然可以执行以下操作,但是我确实更喜欢子组件仍可以使用常规Typography组件的方式。或者,如果有一种方法来扩展/创建一个替代的Typography组件,而该组件不会导致像此处所示的两个组件(包装器和包装的印刷术组件)。
import React from 'react';
import Typography, { TypographyProps } from 'components/Typography';
export default function SidebarTypography({
variant = 'body2',
color = 'textSecondary',
...props
}: TypographyProps): React.ReactElement {
return <Typography variant={variant} color={color} {...props} />;
}
<Sidebar>
<SidebarTypography>
This has body2 and textSecondary.
</SidebarTypography>
</Sidebar>
<Typography>
This has the regular defaults.
</Typography>
使用建议的重复项(是否可以覆盖material-ui组件的默认道具?)和“嵌套主题”功能(https://material-ui.com/customization/theming/#nesting-the-主题)我不知道。
const sidebarTheme = (theme) =>
createMuiTheme({
...theme,
props: {
...theme.props,
MuiTypography: {
color: 'textSecondary',
variant: 'body2',
},
},
});
export default function SideBar(props) {
return (
<ThemeProvider theme={sideBarTheme}>{props.children}</ThemeProvider>
);
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句