Question

我在我的反应项目中使用了材料ui库，我遇到了一个奇怪的问题，当我尝试在按钮图标中使用svg图标时，icom没有与中心。

例如：

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

对于此代码，我将得到以下结果：

对于这段代码：

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

我会得到以下结果：

我的问题是，我如何得到我的第二个例子的结果，但是我们在另一个元素中的图标？

Answer 1

这有点晚了，但我最近遇到了同样的问题，并通过将IconButton组件包装在自定义组件中并扩展css来解决它。您可能必须更改其他一些CSS以使其完全对齐，但这适用于我的用例。

＆＃13;

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;

＆＃13;

这就是这个自定义IconButton的简化用法：

＆＃13;

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

＆＃13;

Answer 2

将样式传递给内部元素对我有用：

return <SvgIcon style={this.props.style} />

Answer 3

检查此代码，对我工作正常

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;

另一个元素内的Material-ui svg-icons不与中心对齐

3 个答案: