包装组件中断样式

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

我做得不对或这是一个错误？

来源

2016-12-08 norflow

你的CSS是什么样子的按钮样式？它是否使用任何后代或儿童选择器？ – finalfreq

我没有CSS，除了Material UI中包含的内容 – norflow

您是否可以打开一个浏览器窗口并显示一个结果，然后用另一个结果打开另一个浏览器窗口，然后使用DOM检查器查看这两个元素之间有什么不同？ – finalfreq

材料UI的AppBar.js具体看你放什么类型的组件iconElementRight，然后在其上施加适当的风格，如果它的原生材料的UI IconMenu，IconButton，或FlatButton。如果您包装其中任何一个，则检测失败，并且样式将不会应用。因此，您必须自己将相同样式应用于您的<Login />组件（看起来像它的color，计算得出marginTop）。从AppBar.js

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: 
}

例子：

// Using material-ui's default IconButton size of 48... (48 - 36)/2 + 1 = 7 
<Login style={{ color: 'white', marginTop: 7 }} />

来源

2016-12-08 22:32:15

一个替代方案 - 感觉哈克，所以不知道我推荐 - 将juat添加行“Login.muiName ='FlatButton';”在你的类声明之后。这会欺骗MUI对待你的登录，就好像它是一个本地的FlatButton一样，并为你使用这种风格。 –

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

来源

2016-12-09 04:06:30

包装组件中断样式

回答

相关问题