有没有办法更改组件中的印刷默认设置?

v

Typography组件的默认变体和颜色body1initial我已经制作了一个组件,并且当Typography组件用作它的子代时,我希望默认设置为body2and 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>
v

使用建议的重复项(是否可以覆盖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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

有没有办法在GVM中设置默认的Groovy和Grails版本?

来自分类Dev

有没有办法在CSS中设置默认边框颜色/大小?

来自分类Dev

有没有办法在 PCL-PR EXTPGM 中设置默认值?

来自分类Dev

有没有办法在django模型的CharField中设置默认值?

来自分类Dev

有没有办法从Perforce的默认更改列表中删除文件?

来自分类Dev

有没有办法在Windows日历中更改默认的暂停时间?

来自分类Dev

有没有办法在Windows终端中更改默认外壳程序?

来自分类Dev

有没有办法更改 Python 中的默认数据类型?

来自分类Dev

有没有办法在leveldb中更改键?

来自分类Dev

有没有办法设置快速设置图块的默认状态?

来自分类Dev

有没有办法使用默认的 iOS 设置屏幕模块在应用程序中构建它?

来自分类Dev

有没有办法使Neo4j中的值过期,并将其更改为默认值

来自分类Dev

有没有办法在Ionic 4中全局设置组件上的一个模式?

来自分类Dev

有没有办法将-lm设置为gcc的默认值?

来自分类Dev

有没有办法为Heroku Toolbelt设置默认应用程序?

来自分类Dev

有没有办法为VLC设置默认缓冲区?

来自分类Dev

Intellij 12+:有没有办法设置默认代码样式?

来自分类Dev

有没有办法更改Python的open()默认文本编码?

来自分类Dev

有没有办法为您的应用程序更改默认字体

来自分类Dev

有没有办法更改自动创建的默认“ id”列?

来自分类Dev

有没有办法更改默认的“材质”颜色定义?

来自分类Dev

有没有办法更改默认日期输入格式

来自分类Dev

有没有办法更改默认的ssh连接端口?

来自分类Dev

有没有办法更改visualstudiocode的默认路径?

来自分类Dev

有没有办法更改默认的登录名/密码提示?

来自分类Dev

有没有办法以编程方式更改集合视图的默认项?

来自分类Dev

Aurelia组件。有没有办法在打字稿中访问组件的功能

来自分类Dev

有没有办法定义默认布局?

来自分类Dev

有没有办法让Typescript使用默认参数?

Related 相关文章

  1. 1

    有没有办法在GVM中设置默认的Groovy和Grails版本?

  2. 2

    有没有办法在CSS中设置默认边框颜色/大小?

  3. 3

    有没有办法在 PCL-PR EXTPGM 中设置默认值?

  4. 4

    有没有办法在django模型的CharField中设置默认值?

  5. 5

    有没有办法从Perforce的默认更改列表中删除文件?

  6. 6

    有没有办法在Windows日历中更改默认的暂停时间?

  7. 7

    有没有办法在Windows终端中更改默认外壳程序?

  8. 8

    有没有办法更改 Python 中的默认数据类型?

  9. 9

    有没有办法在leveldb中更改键?

  10. 10

    有没有办法设置快速设置图块的默认状态?

  11. 11

    有没有办法使用默认的 iOS 设置屏幕模块在应用程序中构建它?

  12. 12

    有没有办法使Neo4j中的值过期,并将其更改为默认值

  13. 13

    有没有办法在Ionic 4中全局设置组件上的一个模式?

  14. 14

    有没有办法将-lm设置为gcc的默认值?

  15. 15

    有没有办法为Heroku Toolbelt设置默认应用程序?

  16. 16

    有没有办法为VLC设置默认缓冲区?

  17. 17

    Intellij 12+:有没有办法设置默认代码样式?

  18. 18

    有没有办法更改Python的open()默认文本编码?

  19. 19

    有没有办法为您的应用程序更改默认字体

  20. 20

    有没有办法更改自动创建的默认“ id”列?

  21. 21

    有没有办法更改默认的“材质”颜色定义?

  22. 22

    有没有办法更改默认日期输入格式

  23. 23

    有没有办法更改默认的ssh连接端口?

  24. 24

    有没有办法更改visualstudiocode的默认路径?

  25. 25

    有没有办法更改默认的登录名/密码提示?

  26. 26

    有没有办法以编程方式更改集合视图的默认项?

  27. 27

    Aurelia组件。有没有办法在打字稿中访问组件的功能

  28. 28

    有没有办法定义默认布局?

  29. 29

    有没有办法让Typescript使用默认参数?

热门标签

归档