关于 http://www.material-ui.com/#/components/app-bar它说他们支持的可能属性之一是“iconElementLeft ... element ...要显示在应用程序栏左侧的自定义元素,例如 SvgIcon。”

我现在所拥有的样式与菜单栏上的其他内容不同...我指向我找到的一个 svg 图标并使用 img 属性来尝试适应它。我如何制作 Material -UI 风格像原生一样吗?

export default (props)=>{ 
return ( 
    <AppBar 
        title={<span style={styles.title}><Link to="/" className="logoLink">GIGG.TV</Link></span>} 
        className="header" 
        iconElementLeft={<img src='../../public/img/rocket.svg' height='40' width='40' alt='' />} 
        // showMenuIconButton={false} 
        iconElementRight={ 
            <IconMenu 
              iconButtonElement={ 
                <IconButton><MoreVertIcon /></IconButton> 
              } 
              targetOrigin={{horizontal: 'right', vertical: 'top'}} 
              anchorOrigin={{horizontal: 'right', vertical: 'top'}} 
            > 
              <MenuItem 
                linkButton={true} 
                primaryText="Home" 
                containerElement={<Link to="/" className="logoLink">GIGG.tv</Link>} /> 
 
              <MenuItem primaryText="Sign in" containerElement={ <SignInModal/>} /> 
              <MenuItem 
                linkButton={true} 
                primaryText="Login as Artist" 
                containerElement={<Link to="/artistSignIn" >Sign in/Up </Link>} /> 
            </IconMenu> 
          }/> 
    ) 
} 

或者,我如何查看 Material-UI NPM 包中的所有图标,看看它们是否有可能工作的 native 图标?

请您参考如下方法:

两种方式...

  1. 使用 SvgIcon 内联 svg

    SvgIcon component ,您可以包含所需的 Svg 资源。

  2. 导入现有的material-ui资源 只需导入到变量中即可使用它。

    从“material-ui/lib/svg-icons/file/cloud-download”导入 FileCloudDownload;

    ...

    iconElementLeft={FileCloudDownload}

您还将在上面的链接中看到样式示例。


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!