Reactjs 材质UI内联样式不起作用

在材质界面中，我想在按钮上设置边框半径。传递

style

属性似乎适用于

FlatButton

，但不适用于

RaisedButton

对于

升起按钮

，边界半径应用于父级

（这是必需的），但不应用于

本身（这也是必需的）

这是材质UI中的错误吗？或者这种行为是故意的？如果是有意的，那么我如何制作一个圆角的凸起按钮

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>
    );
  };
}

从“React”导入React；
从“物料ui/lib/raised按钮”导入RaisedButton；
从“物料界面/库/平面按钮”导入平面按钮；
导出默认类MyButtons扩展React.Component{
render（）{
返回(
{/*作品*/}
{/*不起作用*/}
);
};
}

这是预期的行为，并且。作为记录，您永远不会希望将

样式

道具传递给多个子项，因为没有任何样式对所有子项都是有意义的——您会将它们应用到嵌套的多深

但我认为你在这里混淆视听。在组件上使用

style

只会影响根元素——这是假设开发人员选择传递样式标记

但是您要做的不是为组件设置样式，而是为组件的元素设置样式。您要做的是使用CSS类：

。升起的按钮--四舍五入，
.凸起的按钮--圆形按钮{
边界半径：25px；/*假设尚未定义边界半径*/
}

---

---

NB：开发人员不希望您更改他们没有明确公开的组件样式。通过这种方法，你最终会遇到问题。

我原则上同意你所说的。实际上，我只想要圆角。我的期望是，当我传递

style

属性时，根组件应该知道哪个子组件也需要这个样式，并且知道应该应用多深。如果组件不这样做，那么您不认为行为是意外的吗？在这个特定的示例中，此答案中提供的代码无效（“材质ui”：“^0.14.2”）边界半径已内联定义，这是否意味着无法更改它？（除了使用！重要）这不是一个合理的期望，我怀疑您永远不会在您使用的任何组件库中找到该功能。该库要么（a）必须明确支持圆角，这是欢迎开发人员使用的（尽管它不是MD规范的一部分）；或者（b）必须考虑每一个可能的CSS属性，并分析哪些要发送给哪些子组件。后者是不合理的。作为记录，这是许多人反对使用带有React的内联样式的原因之一。对于类，解决方案很简单。除了

！重要的

，否。这就是nota bene所要指出的。您将遇到问题，因为开发人员使用内联样式，不支持更改任意组件样式。但我想说的是，这就是使用类似规格的材料设计的意义所在——你不应该改变它。非常感谢你证实了我怀疑的情况