材质UI内联样式不起作用

Question

在Material UI中,我想在我的按钮上设置borderRadius.传递style属性似乎适用FlatButton但不适用RaisedButton.

因为RaisedButton,borderRadius应用于父<div>(必要)但不适用于<button>自身(这也是必要的)

这是Material UI中的错误吗？或者这种行为是打算？如果是这样的话,那么如何制作带圆角的RaisedButton呢？

import React from 'react';
import RaisedButton from 'material-ui/lib/raised-button';
import FlatButton from 'material-ui/lib/flat-button';

export default class MyButtons extends React.Component {

  render() {
    return (
      <div>
        <FlatButton label="flat button" style={{borderRadius: '25px'}}/> {/*works*/}
        <RaisedButton label="raised button" style={{borderRadius: '25px'}} /> {/*does not work*/} 
      </div>
    );
  };
}

Answer 1

这是预期的行为,并在文档中这样说.为了记录,你永远不会希望将style道具传递给多个孩子,因为没有任何样式对所有孩子都有意义 - 你会有多深入嵌套你会应用它们吗？

但我认为你在这里混淆了一些问题.使用style一对组件应该永远只影响根元素-而这是假设开发商选择了沿风格标签通过,他们照办了.

但你希望做的是没有风格的什么成分,但风格元素的分量.你想要做的是使用CSS类:

<RaisedButton label="raised button" className="raised-button--rounded" />

.raised-button--rounded,
.raised-button--rounded button {
  border-radius: 25px; /* assuming one is not already defined */
}

注意:开发人员不打算让您更改他们没有专门公开的组件样式.通过这种方法,您最终会遇到问题.