包装组件打破了风格

Question

const Login = () => (
  <FlatButton label="Login" />
);

export class App extends Component {
  render() {
    return (
      <div className="container">
        <MuiThemeProvider>
          <AppBar
            iconElementRight={<Login />}
          />
        </MuiThemeProvider>
      </div>
    );
  }
}

结果是一个破损样式的按钮。

这是一张图片：http://i.imgur.com/1IHboDq.png

但是，直接插入组件可以很好地完成。 像这样：

      <AppBar
        iconElementRight={<FlatButton label="Login" />}
      />

http://i.imgur.com/1kUaVYT.png

我做错了什么还是这个错误？

Answer 1

material-ui的AppBar.js专门查看您在iconElementRight中放置的组件类型，然后在其上应用适当的样式（如果它是本机材料-ui IconMenu，{{1} }，或IconButton。如果你包装其中任何一个，检测失败，并且不会应用样式。因此，您必须自己将相同的样式应用于FlatButton组件（看起来只是<Login />和计算的color）。

AppBar.js的相关代码......

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

marginTop

示例：

const flatButtonSize = 36;

const styles = {
  // ...
  flatButton: {
    color: appBar.textColor,
    marginTop: (iconButtonSize - flatButtonSize) / 2 + 1,
  },
  // ...
};

// ...

switch (iconElementRight.type.muiName) {
  case 'IconMenu':
  case 'IconButton':
    // ...
    break;
  case 'FlatButton':
    iconElementRightProps.style = Object.assign({}, styles.flatButton, iconElementRight.props.style);
    break;
  default:
}

Answer 2

您可能已经知道这一点，但为了以防万一，如果您将<MuiThemeProvider></MuiThemeProvider>包裹在父JSX文件周围，您只需要在那里而不是在每个文件中调用它。可能是MuiThemeProvider的多个实例导致了问题。