样式不适用于 Material UI React 中的 SVG 图标答案

【问题标题】：style not applied to SVGIcon in MaterialUI React样式不适用于 Material UI React 中的 SVG 图标
【发布时间】：2017-04-15 17:26:14
【问题描述】：

我有一种应用于 ActionSearch 图标的样式，但不幸的是它没有通过。

不知道我可以为这个问题写什么，我认为这很简单，但是当 Paper 获得样式时，图标组件却没有。

知道为什么会这样吗？

import React from 'react';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import IconButton from 'material-ui/IconButton';
import ActionSearch from 'material-ui/svg-icons/action/search';

const stylePaper = {
  width: 400,
  margin: '40px auto',
  paddingBottom: 10,
  textAlign: 'center',
  display: 'inline-block'
};

const styleIcon = {
  position: 'absolute',
  top: 20
};

export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <Paper zDepth={2} style={stylePaper} >
          <TextField
            hintText="Type in brand, position or industry"
          />
          <IconButton>
            <ActionSearch style={styleIcon} />
          </IconButton>
        </Paper>
      </form>
    );
  }
}

这是检查员图片

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

因为 svg 图标已经被包装为这个库中的一个组件（material-ui react），我认为你不能直接应用你的样式对象。从官方文档中，我认为您可能需要为组件中的属性“iconStyle”传递样式对象，请查看http://www.material-ui.com/#/components/icon-button。

【讨论】：

我认为你是对的，一旦我确认我将编辑答案（添加 react-router）:)