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

Question

我有一种应用于 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>
    );
  }
}

这是检查员图片

Answer 1

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

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

style not applied to SVGIcon in MaterialUI React

reactjs

material-ui