material-UI: 无法在选项卡内设置 SVG 图标的颜色

Question

在 react class render() 中有以下内容：

import {blue900} from 'material-ui/styles/colors';
import {Tabs, Tab} from 'material-ui/Tabs';
import SocialPeople from 'material-ui/svg-icons/social/people';

var myClass = React.createClass({
   render: function() {
     return (
      <Tabs>
        <Tab icon={<SocialPeople color={blue900} />}/>
      </Tabs>
     );
   }
});

SVG 图标颜色在上面被忽略，而在下面有效：

var myClass = React.createClass({
   render: function() {
     return (
        <SocialPeople color={blue900} />
     );
   }
});

谁能解释一下？如何设置tab元素内的图标颜色？

Answer 1

目前看来，如果不更改库，这是不可能的。我相信这是一个错误。我很难找到解决方案。然后我就看了一下代码。

我发现，当一个图标元素被传递给 Tab 组件时，Tab 组件的属性会发生变化，包括您传递的样式。所以它制作了图标的副本，但具有不同的属性和样式并进行渲染。

if (icon && React.isValidElement(icon)) {
  const iconProps = {
    style: {
      fontSize: 24,
      color: styles.root.color,
      marginBottom: label ? 5 : 0,
    },
  };
  if (icon.type.muiName !== 'FontIcon') {
    iconProps.color = styles.root.color;
  }
  iconElement = React.cloneElement(icon, iconProps);
}

所以您发送的颜色被忽略了，它从 MuiTheme 中获取了颜色。

https://github.com/callemall/material-ui/blob/master/src/Tabs/Tab.js

看看代码。第 5 至 25 行和第 110 至 126 行..

因此您需要更改库才能获得颜色。只需按照以下步骤..

打开文件node_modules/material-ui/Tabs/Tab.js
转到第 128 行

iconProps.color = styles.root.color

并用这个替换它

   if (icon.props) {
      if (icon.props.style && icon.props.style.color) {
        iconProps.color = icon.props.style.color;
      } else if (icon.props.color) {
        iconProps.color = icon.props.color;
      } else {
        iconProps.color = styles.root.color;
      }

      if (icon.props.hoverColor) {
        iconProps.hoverColor = icon.props.hoverColor;
      }
    }

就是这样..现在你的图标元素应该是这样的

<SocialPeople style={{ color: 'red' }} />

material-UI: 无法在选项卡内设置 SVG 图标的颜色

material-UI: Unable to set Color of SVG Icon inside Tab

reactjs

react-jsx

material-ui