材料ui中的弹出 - 使用组件时显示毛刺

时间:2016-02-27 19:59:55

标签: reactjs popover material-ui

这是一个微不足道的问题,但我没有看到问题究竟在哪里。

据我所知,React提供了将内容分成(某种程度上)独立组件的能力,从而使页面更清晰,因为并非所有内容都被塞入一个巨大的HTML文件中。我认为哲学是这样的。

基本上,当我这样做时,一切正常:

<Popover open={this.props.popover === LoginPopoverState.LOGIN}
         anchorEl={this.props.anchorEl}
         onRequestClose={this.handleHideLogin.bind(this, dispatch)}>
     <div style={loginStyle}>
          <TextField hintText="Username oder E-Mail" ref="username_login" floatingLabelText="Username / E-Mail"/><br />
          <TextField hintText="Passwort" type="password" ref="password_login" floatingLabelText="Passwort" /><br />
          <RaisedButton label="Login" onTouchTap={e => this.handleLoginTap(e, dispatch)} />
          <p>Zur <a href="javascript://" onTouchTap={e => this.handleShowRegisterTap(e, dispatch)}>Registration</a>.</p>
     </div>
</Popover>

看起来像这样:

Nicely styled

然而,当我将<div>拉出到另一个模块然后做这样的事情时:

import LoginFragment from './loginBar/LoginFragment.jsx'
<Popover open={this.props.popover === LoginPopoverState.LOGIN}
         anchorEl={this.props.anchorEl}
         onRequestClose={this.handleHideLogin.bind(this, dispatch)}>
     <LoginFragment />
</Popover>

其中LoginFragment.jsx包含以下内容:

var LoginFragment = React.createClass({
    render() {
        return (
            <TextField hintText="Username oder E-Mail" ref="username_login" floatingLabelText="Username / E-Mail"/>
        )
    }
})

导致这个热点:

Not nicely styled

那么,这里发生了什么?

1 个答案:

答案 0 :(得分:0)

它可能是一个CSS样式问题,因为你不再将你的字段包装在div中(现在你正在跳过应用于这个包含div的loginStyle。)

所以,在旧版本中你有:

<Popover ...>
     <div style={loginStyle}>
          <TextField ...><br />
          <TextField ...><br />
          <RaisedButton .../>
          <p>...</p>
     </div>
</Popover>

但是你现在在新版本中包含的内容,使用单个LoginFragment组件,一旦展开,将如下所示:

<Popover ...>         

          <TextField ...>

</Popover>

在此版本中,包装div(及其样式)将丢失。在您的代码中再次包含<div style={loginStyle}>将修复任何CSS样式冲突,或帮助查找并隔离问题。像这样:

import LoginFragment from './loginBar/LoginFragment.jsx'
<Popover open={this.props.popover === LoginPopoverState.LOGIN}
         anchorEl={this.props.anchorEl}
         onRequestClose={this.handleHideLogin.bind(this, dispatch)}>
     <div style={loginStyle}>
         <LoginFragment />
     </div>
</Popover>