文章/答案/技术大牛

发布

社区首页 >问答首页 >有没有办法更改组件中的默认排版？

问有没有办法更改组件中的默认排版？
EN

Stack Overflow用户

提问于 2020-01-14 20:47:08

回答 3查看 907关注 0票数 1

Typography component的默认变体和颜色是body1和initial。我已经创建了一个组件，当排版组件用作它的子组件时，我希望缺省值为body2和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>

我当然可以做以下事情，但我真的更喜欢这样一种方式，在子组件中仍然可以使用常规的排版组件。或者，如果有一种方法可以扩展/创建一个替代的排版组件，而不会产生像这样的两个组件(包装器和包装的排版组件)。

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>

reactjs

material-ui

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-01-16 21:00:16

使用建议的副本(Is it possible to override material-ui components default props?)和“嵌套主题”功能(https://material-ui.com/customization/theming/#nesting-the-theme)的组合解决了我不知道的问题。

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>
  );
}

票数 4

Stack Overflow用户

发布于 2020-05-06 11:18:35

您还可以像这样全局覆盖MuiTypography的任何变体。

import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';

const theme = createMuiTheme({
  overrides: {
    MuiTypography: {
      body1: {
        fontSize: '18px !important',
        color: 'red',
      },
    },
  },
});

 <MuiThemeProvider theme={theme}> 
        // Your pages...
 </MuiThemeProvider>

票数 1

Stack Overflow用户

发布于 2020-01-14 20:58:18

<Typography variant="h1" component="h2">
  h1. Heading
</Typography>

票数 -2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59734094

复制

相似问题

问有没有办法更改组件中的默认排版？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有办法更改组件中的默认排版？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有没有办法更改组件中的默认排版？
EN