4

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

对于RaisedButton，borderRadius 应用于父级<div>（这是必要的）但不应用于<button>自身（这也是必要的）

这是材质 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>
    );
  };
}
4

1 回答 1

10

这是预期的行为，并在 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 */
}

注意：开发人员不打算让您更改他们没有特别公开的组件样式。通过这种方法，您最终会遇到问题。

于 2016-01-13T21:28:29.300 回答