Material-ui svg-icons внутри другого элемента не выравнивается по центру

Я использую библиотеку пользовательского интерфейса материала в своем проекте реакции, и я столкнулся со странной проблемой: когда я пытаюсь использовать значки svg внутри значка кнопки, icom не выравнивается по центру.

Например:

<ListItem key={product.id}
          primaryText={product.title}
          leftAvatar={<Avatar src={product.img}/>}
          rightIcon={<IconButton><RemoveIcon/></IconButton>}/>

для этого кода я получу следующий результат: A

И для этого кода:

<ListItem key={product.id}
          primaryText={product.title}
          leftAvatar={<Avatar src={product.img}/>}
          rightIcon={<RemoveIcon/>}/>

Получу следующий результат: введите описание изображения здесь

У меня вопрос, как мне получить результат моего второго примера, но что значок будет внутри другого элемента?


reactjs material-ui
person Golan Kiviti    schedule 05.05.2016    source источник
comment
зачем тебе там IconButton?   -  person André Junges    schedule 05.05.2016
comment
потому что мне нужна кнопка со значком, можете ли вы придумать другой способ сделать это?   -  person Golan Kiviti    schedule 05.05.2016
comment
Компонент Listitem имеет свой собственный волновой эффект по всей линии. Обычно вы не вставляете туда кнопку (по крайней мере, на мой взгляд). У вас будет конкретное событие щелчка в этом аватаре?   -  person André Junges    schedule 05.05.2016
comment
Что ж, я имею в виду, что когда вы нажимаете кнопку X, товар просто удаляется из корзины, для этого и предназначена кнопка.   -  person Golan Kiviti    schedule 06.05.2016
comment
Я бы посоветовал вам не использовать ListItem в этом случае, если вы действительно не хотите, чтобы эффект ряби по всей линии. Если вы, например, просто используете Paper, у вас будет эффект пульсации от кнопки ... разве этого не достаточно?   -  person André Junges    schedule 06.05.2016

Ответы (3)


arrow_upward
1
arrow_downward

Это немного поздно, но недавно у меня была такая же проблема, и я решил ее, заключив компонент IconButton в пользовательский компонент и расширив css. Возможно, вам придется изменить какой-то другой CSS, чтобы он идеально выровнялся, но в моем случае это сработало.

import React, { PropTypes, Component } from 'react';
import IconButton from 'material-ui/IconButton';

const CustomIconButton = (props) => {
    const { style } = props;
    const additionalStyles = {
        marginTop: '0'
    };
    return(
        <IconButton {...props } style={{ ...style, ...additionalStyles }} iconStyle={{ fontSize: '20px' }}/>
    );
};

CustomIconButton.PropTypes = {
    // listed all the props that IconButton requires (check docs)
};

export default PPIconButton;

Вот как выглядит упрощенное использование этого настраиваемого IconButton:

const deleteIconButton = (deleteFunc) => {
  return <CustomIconButton
      touch={true}
      tooltip="Delete"
      tooltipPosition="top-right"
      onTouchTap={deleteFeed}
      iconClassName="fa fa-trash"
      />;
};

class MyList extends Component {
  render() {
    return (
      <div>
        <List>
            <ListItem value={ i } primaryText="My List Item" rightIcon={ deleteIconButton(() => this.props.deleteFeed(i) } />
          ) }
        </List>
      </div>
    );
  }
}

person Philip C    schedule 12.01.2017

arrow_upward
0
arrow_downward

Передача стилей во внутренний элемент сработала для меня:

return <SvgIcon style={this.props.style} />
person Bjorn Reppen    schedule 04.06.2018

arrow_upward
-1
arrow_downward

проверьте этот код, отлично работает для меня

import React from 'react';
import List from 'material-ui/List';
import ListItem from 'material-ui/List/ListItem';

import Delete from 'material-ui/svg-icons/action/delete';


const MenuExampleIcons = () => (
  <div>
    <List style={{width:"300px"}}>
      <ListItem primaryText="New Config" leftIcon={<Delete />} />
      <ListItem primaryText="New Config" rightIcon={<Delete />} />
    </List>
  </div>
);

export default MenuExampleIcons;
person Nageshwar Reddy Pandem    schedule 06.05.2016
comment
Да, это работает, и я пробовал это, но в этом случае это просто значок, и я хочу, чтобы это была кнопка - person Golan Kiviti; 06.05.2016