iconClassNameRight = «muidocs-значок-навигация расширяющейся-больше» не работает

Все:iconClassNameRight = «muidocs-значок-навигация расширяющейся-больше» не работает

Я довольно новый для материала-UI, когда я следую за первый примером в компонентах раздела, расширить еще значок на правой стороне из AppBar не показан вверх (что стрелка вниз):

http://www.material-ui.com/#/components/app-bar

Я уже включены:

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'> 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

и установить стиль:

html, body { 
    width:100%; 
    height:100%; 
    padding:0px; 
    margin:0px; 
    font-family: 'Roboto', sans-serif; 
    }

Любая помощь?

источник

2016-07-26 Kuan

Это имя класса с сайта документации материала ui.

https://github.com/callemall/material-ui/issues/2526

источник

2016-07-27 01:38:11

Большое спасибо. Оно работает. Не могли бы вы показать мне, как вы это знаете? – Kuan

Вы должны принять другой подход, используете ли вы Материальные иконки или пользовательские иконки SVG:

Материал Иконы

Раствор для Material Icons будет использовать Font Icon компонент в AppBar, как показано ниже:

import React from 'react'; 
import AppBar from 'material-ui/AppBar'; 
import IconButton from 'material-ui/IconButton'; 
import FontIcon from 'material-ui/FontIcon'; 

const Header =() => (
    <AppBar 
     title="Title" 
     iconElementRight={<IconButton> 
      <FontIcon className="material-icons">settings</FontIcon> 
     </IconButton>} 
    /> 
); 

export default Header;

Не забудьте добавить Material Icon шрифт в <head> из index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Пользовательские SVG иконки

Вы можете использовать SvgIcon компонент для пользовательских иконок SVG:

import React from 'react'; 
import AppBar from 'material-ui/AppBar'; 
import IconButton from 'material-ui/IconButton'; 
import SvgIcon from 'material-ui/SvgIcon'; 

const GitHubIcon = (props) => (
    <SvgIcon {...props}> 
     {<path 
      d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>} 
    </SvgIcon> 
); 

const Header =() => (
    <AppBar 
     title="Title" 
     iconElementRight={<IconButton> 
      <GitHubIcon/> 
     </IconButton>} 
    /> 
);

SvgIcon comp onent берет элемент пути SVG в качестве своего дочернего элемента и преобразует его в компонент React, который отображает путь и позволяет значку стилизоваться и отвечать на события мыши.

Для получения path для значков популярных марок вы можете использовать Simple Icons. Просто перейдите к исходному источнику значка svg, скопируйте его часть path и замените его в коде, как показано выше.

источник

2017-10-16 14:02:44

iconClassNameRight = «muidocs-значок-навигация расширяющейся-больше» не работает

ответ

Смежные вопросы