材质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

这是预期的行为，并在docs中这样说。作为记录，您永远不希望将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 */
}

注意 ：开发人员无意让您更改他们未明确公开的组件样式。通过这种方法，您最终 会 遇到问题。