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

这是预期的行为，says so in the docs。对于记录，你永远不会希望将style道具传递给多个孩子，因为没有样式对所有孩子都有意义 - 你会有多深的嵌套应用它们吗？

但我认为你在这里混淆了一些问题。在组件上使用style应该只影响根元素 - 假设开发人员选择传递样式标记which they did。

但您要做的不是设置组件的样式，而是设置组件的元素。你想要做的是使用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 */
}

NB ：开发人员不打算让您更改他们未专门公开的组件样式。通过这种方法，最终会遇到问题。

材质UI内联样式无效

1 个答案: