Material 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

这是预期的行为，says so in the docs。作为记录，您永远不会希望将 style 道具传递给多个 children，因为没有任何样式在所有 children 中都有意义 - 您将应用它们的嵌套深度是多少？

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

但是您要做的不是设置组件的样式，而是设置 of 组件的元素的样式。你想要做的是使用 CSS class:

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

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

注意: 开发者无意让您更改他们未明确公开的组件样式。通过这种方法，您最终会运行陷入困境。

Material UI 内联样式无效

Material UI inline style not working

reactjs

material-ui